Canvas Docs

Off-Canvas

A Bootstrap 5 off-canvas sliding panel (start / end / top / bottom) opened by a button or link. It is shown in the block inserter as Canvas Off-Canvas and registered as canvas-core/off-canvas.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Off-Canvas settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • Render the TriggerDefaultOn

    Turn this off to place the panel on its own, with no button of its own. Any number of buttons or links elsewhere on the page can then be pointed at it, which is how a header icon opens a side panel.

  • Trigger TextDefaultOpen

    Wording on the control that opens the panel.

    Shown when Render the Trigger is on

  • Trigger StyleDefaultButton (Default)

    How that control is drawn: as a button in one of the theme colours, or as a plain text link.

    ChoicesButton (Default)Button - PrimaryButton - SecondaryText LinkShown when Render the Trigger is on

  • Panel TitleDefaultOffcanvas

    Heading along the top of the panel, which tells a visitor what has opened.

  • Panel Title TagDefaultH5

    Heading level that title takes. Choose span to keep the panel out of the page outline.

    ChoicesH2H3H4H5H6span

  • Panel Title ClassesDefaultoffcanvas-title

    Class list on the panel heading. Clear it to let a heading tag carry the design's own typography instead of the Bootstrap title style.

  • Panel Content (legacy)DefaultEmpty

    Legacy fallback only. New content should be added as nested blocks directly inside the panel in the editor canvas; this field is used only when no inner blocks are present (backward compatibility).

Style

  • Panel ClassesDefaultEmpty

    Extra classes on the sliding panel, e.g. the border utilities that separate it from the page.

  • Header ClassesDefaultEmpty

    Extra classes on the header row that holds the title and the close button.

  • Body ClassesDefaultEmpty

    Extra classes on the panel body, e.g. the flex utilities that centre a short message.

  • Close Button ClassesDefaultEmpty

    Extra classes on the close button, e.g. the light variant Bootstrap uses on a dark panel.

Settings

  • PositionDefaultEnd (Right)

    Which edge of the screen the panel slides in from.

    ChoicesStart (Left)End (Right)TopBottom

  • BackdropDefaultEnabled

    Controls the dimmed background behind the panel.

    ChoicesEnabledDisabledStatic (no close on click)

  • Allow Body ScrollDefaultOff

    Keep the page body scrollable while the panel is open.

Style tab

  • Panel Background

    A style control in the Panel group of the Style tab.

  • Panel Text Color

    A style control in the Panel group of the Style tab.

  • Horizontal Padding

    A style control in the Panel group of the Style tab.

  • Vertical Padding

    A style control in the Panel group of the Style tab.

  • Border Color

    A style control in the Panel group of the Style tab.

  • Panel Width

    A style control in the Panel group of the Style tab.

  • Panel Height

    A style control in the Panel group of the Style tab.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.

Was this page helpful?