Examples

Panels you can open.

Working offcanvas panels built by the extension, one per attribute, with the source alongside each.

Every trigger below opens a panel built by the extension as this page was rendered.

The site sets these defaults in _quarto.yml, and the panels below override them:

extensions:
  offcanvas:
    placement: end
    width: 420px
    trigger-class: btn btn-outline-primary

From each edge

placement decides the edge, and left and right are aliases of start and end.

From the start

placement="start", which is the left edge in a left-to-right document.

From the end

placement="end", the site default.

From the top

placement="top" with height="220px", since a top panel is sized by height rather than width.

From the bottom

placement="bottom", again sized by height.

:::: {.offcanvas placement="start" trigger-text="From the start"}
:::: {.offcanvas placement="top" height="220px" trigger-text="From the top"}

The header

The first heading in the div becomes the title, and the extension writes it as the panel’s offcanvas-title. The title attribute replaces that text. The heading is taken out of the body either way, so the body starts at the paragraph below it.

Settings

title="Settings" supplied the header text, and this heading was still removed from the body.

show-close="false" leaves the close button out of the header. The backdrop and Esc still close the panel, because both stay on by default.

No close button

show-close="false", so the header carries the title alone. Click outside the panel, or press Esc, to close it.

:::: {.offcanvas title="Settings" trigger-text="A title of its own"}
:::: {.offcanvas show-close="false" trigger-text="No close button"}

The title is also the panel’s accessible name, since the panel points at it with aria-labelledby. A panel with neither a heading nor a title has no accessible name, which Limitations records.

Backdrop, scrolling, and the keyboard

Static backdrop

backdrop="static" keeps this open when the backdrop is clicked, and keyboard="false" stops Esc closing it. The close button is the way out.

No backdrop

backdrop="false" and scroll="true", so the page behind stays readable and scrollable.

Triggers

trigger-type="text" produces a span rather than a button, and trigger-style adds inline CSS to it.

A text trigger
A text trigger

The built-in cursor: pointer is kept alongside the style above rather than replaced by it.

A .offcanvas-trigger child supplies arbitrary markdown instead, and wins over trigger-text:

A custom trigger

The trigger above came from a nested .offcanvas-trigger div.

With trigger-position="none" no trigger is written, and you place your own:

A panel with no trigger of its own

Opened from a link elsewhere in the document.

Open the manual panel

:::: {#manual-panel .offcanvas trigger-position="none"}
## A panel with no trigger of its own
::::

[Open the manual panel](#manual-panel){bs-toggle="offcanvas"}

An icon on the trigger

trigger-icon puts an <i> element carrying the given classes in front of the trigger text. This site loads Bootstrap Icons, so a bi bi-* class draws an icon here.

Settings

trigger-icon="bi bi-gear", which the extension writes as <i class="bi bi-gear"></i> before the text.

A text trigger takes an icon the same way.

More about this
More about this

The icon sits inside the span rather than inside a button.

:::: {.offcanvas trigger-icon="bi bi-gear" trigger-text="Settings"}
:::: {.offcanvas trigger-icon="bi bi-info-circle" trigger-text="More" trigger-type="text"}

The class has to match an icon font the document already loads, because the extension only writes the class. A trigger of your own carries its own markup, and trigger-icon is not applied to it.

A trigger with no classes

trigger-class="none", or an empty string, writes the trigger with no class attribute at all. The button then keeps the styling the browser gives it.

An unstyled button

trigger-class="none", so no Bootstrap button class reaches this trigger.

Pair it with trigger-style to dress the element yourself.

Styled by hand

trigger-class="none" with trigger-style, so the inline CSS is the only styling the trigger has.

:::: {.offcanvas trigger-class="none" trigger-text="An unstyled button"}
:::: {.offcanvas trigger-class="none" trigger-style="border: 1px dashed currentColor;"}

Every trigger option is listed under Trigger attributes.

Animation and auto-dismiss

Fast slide

animation="fast", so the panel slides in over 150 milliseconds.

Closes itself

auto-dismiss="3000", so this closes three seconds after it opened. Dismissing it sooner cancels the timer.

Margin content

Quarto’s margin notes are invisible on a narrow screen. Setting overtake-margins turns each of them into a panel, with its trigger left in the margin:

extensions:
  offcanvas:
    overtake-margins: true
    placement: end
    width: 450px

The trigger text comes from the first thirty characters of the margin content, unless trigger-text overrides it:

::: {.column-margin trigger-text="View details" title="Additional information"}
The margin note.
:::

This site leaves the option off, so its own margin content stays in the margin.

Source

The repository ships a short, standalone starting point you can copy: example.qmd.

Back to top