Skip to content
Bricks Academy
Get Bricks

Offcanvas

The Offcanvas element is a nestable panel that slides (or offsets) in from a chosen edge of the viewport. Typical use: mobile navigation. Bricks suggests adding a Toggle elsewhere on the page that targets this Offcanvas (see the in-element info link to the menu builder article).

The default structure includes an inner Block (.brx-offcanvas-inner) for your content—often with starter Text and a Toggle labeled for closing—and a second Block acting as the Backdrop (.brx-offcanvas-backdrop), which you can remove if you do not want a backdrop.

Settings

Section titled “Settings”

  • Direction (select) — top, right, bottom, or left. Default: left.

  • Effect (select) — slide or offset.

  • Close on (select) — backdrop (click), esc, none, or default: backdrop and ESC.

  • Width, Height (number with units) — Size of the inner panel (.brx-offcanvas-inner).

  • Transition: Duration (number with units) — Open/close animation; set to 0s to disable.

  • Transition: Timing function (text) — Easing, e.g. cubic-bezier(0.25, 0, 0.25, 1).

  • aria-label (text) — Root dialog label; defaults to “Offcanvas”.

  • Keep open while styling (checkbox) — Builder helper class brx-open to keep the panel open while designing.

  • No scroll (body) (checkbox) — Prevents body scrolling while open.

  • Scroll to top (checkbox) — Scrolls to top when the Offcanvas opens.

  • Disable auto focus (checkbox) — Skips auto-focusing the first focusable element when opening.

  • Open on page load (checkbox) — Opens on the front end when the page loads (not applied in the builder).