Offcanvas

Sliding panels from a fenced div.

What the offcanvas extension is for, how to enable it, and the smallest div that produces a panel and its trigger.
Author

Mickaël CANOUIL, Ph.D.

A Bootstrap offcanvas is a panel that slides in from an edge of the window, and writing one by hand means several nested divs, a set of data-bs- attributes, a separate trigger element, and the ARIA wiring between them.

offcanvas builds all of that from a fenced div. The div becomes the panel, its first heading becomes the title, and the trigger is written for you. The content stays markdown.

Installation

quarto add mcanouil/quarto-offcanvas@1.4.1

This will install the extension under the _extensions subdirectory. If you are using version control, you will want to check in this directory.

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

Enable the filter:

filters:
  - offcanvas

Then write the panel:

:::: {.offcanvas trigger-text="Open the panel"}

# A panel

Written as ordinary markdown.

::::

Which gives you this:

A panel

Written as ordinary markdown, so a link or a list behaves as it would anywhere else.

See the Reference for every attribute, and the Examples for panels from each edge.

Where it works

HTML formats carrying Bootstrap 5, which is Quarto’s default html and its website and book projects.

Note

Bootstrap 4 and earlier have no offcanvas component, and the extension produces nothing there. The responsive breakpoints need Bootstrap 5.2; Quarto ships 5.3.

Back to top