express.ui.offcanvas

express.ui.offcanvas(
    *args,
    title=None,
    footer=None,
    trigger=None,
    id=None,
    placement='right',
    width=None,
    height=None,
    close_button=True,
    backdrop=True,
    scroll=False,
    keyboard=True,
    **kwargs,
)

Create an offcanvas panel.

An offcanvas panel slides in from the edge of the screen and is used to display additional content without navigating away from the page. It can be shown programmatically via show_offcanvas or triggered by a UI element passed to trigger.

Parameters

*args : TagChild = ()

UI elements for the body of the offcanvas panel.

title : TagChild = None

A title displayed in the offcanvas header. When provided, it is also used as the accessible label for the panel via aria-labelledby.

footer : TagChild = None

UI content for the footer area of the offcanvas panel.

trigger : TagChild = None

A UI element that toggles the offcanvas when clicked (e.g., an action button). The trigger and offcanvas are returned as siblings in a TagList.

id : Optional[str] = None

A string ID for the offcanvas element. Required if you want to use hide_offcanvas or toggle_offcanvas.

placement : Literal[‘right’, ‘left’, ‘top’, ‘bottom’] = 'right'

Which side of the screen the panel slides in from: "right" (default), "left", "top", or "bottom".

width : Optional[Union[int, float, str]] = None

A CSS length unit for the panel width. Only applies to "left" and "right" placement.

height : Optional[Union[int, float, str]] = None

A CSS length unit for the panel height. Only applies to "top" and "bottom" placement.

close_button : bool = True

Whether to include a close button in the offcanvas header.

backdrop : Union[bool, Literal[‘static’]] = True

Controls the Bootstrap backdrop behavior. True (default) shows a backdrop and allows clicking outside to close; "static" shows a backdrop but does not close on outside click; False shows no backdrop.

scroll : bool = False

Whether to allow the page body to scroll when the offcanvas is open.

keyboard : bool = True

Whether pressing the Escape key closes the offcanvas.

**kwargs : TagAttrValue = {}

Additional HTML attributes applied to the root <bslib-offcanvas> element.

Returns

: Offcanvas

An Offcanvas object.

See Also

• show_offcanvas
• hide_offcanvas
• toggle_offcanvas

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from shiny import reactive
from shiny.express import input, render, ui

panel = ui.offcanvas(
    ui.p("This is the offcanvas body content."),
    title="Offcanvas Panel",
    id="panel",
)

panel
ui.input_action_button("toggle_btn", "Toggle panel")
ui.input_action_button("hide_btn", "Hide panel")


@render.text
def state():
    return f"Panel is {'open' if input.panel() else 'closed'}"


@reactive.effect
@reactive.event(input.toggle_btn)
def _():
    ui.toggle_offcanvas("panel")


@reactive.effect
@reactive.event(input.hide_btn)
def _():
    ui.hide_offcanvas("panel")