Offcanvas

Details

An offcanvas panel slides in from an edge of the page, on top of the rest of the app, and stays there until it is dismissed. It is a good place for content that is useful but secondary — filters, help text, details about the selected row — that you don’t want taking up room in the main layout.

Create one with ui.offcanvas(), passing the panel’s body as positional arguments. title adds a header, and footer adds content pinned below the body. In both Shiny Core and Shiny Express, ui.offcanvas() is a regular function call rather than a context manager: put it anywhere in your UI, and it renders nothing visible until it is opened.

Every panel needs a way to be opened, so ui.offcanvas() requires either a trigger or an id:

• trigger takes a UI element — usually an action button or a link — that opens the panel when clicked. The trigger is rendered where you placed the ui.offcanvas() call, as a sibling of the panel itself.
• id lets the server open and close the panel with ui.toggle_offcanvas() and ui.hide_offcanvas(), and makes the panel’s open/closed state available as a reactive value, input.<id>().

You can use both together, as the example above does: a button opens the panel, and input.panel() reports whether it is open.

Dismissing a panel

By default a panel can be dismissed in three ways: the close button in its header, clicking the backdrop behind it, or pressing Esc. Each is adjustable:

• close_button=False removes the close button from the header.
• backdrop=False renders no backdrop at all, leaving the rest of the app clickable while the panel is open; backdrop='static' keeps the backdrop but ignores clicks on it, so the panel can’t be closed by accident.
• keyboard=False stops Esc from closing the panel.
• scroll=True lets the page behind the panel keep scrolling while the panel is open.

If you turn off enough of these that the user has no way out, be sure the server closes the panel for them with ui.hide_offcanvas().

Building a panel from the server

ui.show_offcanvas() inserts a panel into the page and opens it in one step. Unlike the other two mutators it takes the object returned by ui.offcanvas(), not an id — ui.show_offcanvas("my_id") raises AttributeError. That makes it the right choice when the panel’s content depends on the state of the app; to open a panel that is already in your UI, use ui.toggle_offcanvas(id, show=True) instead. If you give that panel an id, it stays in the page after it is closed, and calling ui.show_offcanvas() again simply reveals it — the content is not re-rendered. To keep an id’d panel’s content current, put reactive outputs inside it and let them update; without an id, the panel is temporary and is removed from the page when it closes.

Accessibility

The panel is labelled by its title, so a panel without one is unlabelled for screen readers; ui.offcanvas() warns in that case. If you intentionally omit title, pass an aria-label (or aria-labelledby) attribute instead:

ui.offcanvas(
    ui.p("No visible header."),
    trigger=ui.input_action_button("open", "Open panel"),
    **{"aria-label": "Filters"},
)

Prefer a natively keyboard-accessible trigger, such as a button or a link, so the panel can be opened without a mouse.

See Also: a sidebar holds secondary content permanently alongside your app rather than on top of it, and collapses on narrow screens. Modal messages also cover the page, but demand attention now rather than offering content on the side. Popovers and tooltips attach a small amount of content to a specific element.

Variations