Offcanvas¶

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and Bootstrap's JavaScript plugin.

Examples¶

Start, and end — which edge the panel slides in from.

StartEnd

Usage

Unlike Modal, Offcanvas has no built-in trigger button — wire up your own external trigger referencing offcanvas_id.

<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-1">
  Open offcanvas
</button>

{% embed 'bootstrap_components:offcanvas' with {
  offcanvas_id: 'offcanvas-1',
  variant: 'start',
} %}
  {% block title %}Offcanvas Menu{% endblock %}
  {% block body %}
    <p>Some offcanvas content. You can place any HTML here.</p>
  {% endblock %}
{% endembed %}

Usage

<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-2">
  Open offcanvas
</button>

{% embed 'bootstrap_components:offcanvas' with {
  offcanvas_id: 'offcanvas-2',
  variant: 'end',
} %}
  {% block title %}Offcanvas Menu{% endblock %}
  {% block body %}
    <p>Some offcanvas content. You can place any HTML here.</p>
  {% endblock %}
{% endembed %}

Props¶

Prop	Type	Description	Example
`responsive`	string	Hide content in offcanvas below the selected breakpoint. Above that breakpoint, contents behave as usual.	`offcanvas-lg`
`backdrop`	string	When set to `static`, the offcanvas will not close when clicking outside of it.	`false`
`scroll`	boolean	Allow body scrolling behind the offcanvas. Disabled by default.	`false`
`heading_level`	integer	Heading level of the offcanvas title, 2–6.	`5`
`offcanvas_id`	string	ID used by external buttons to toggle visibility. Must start with a letter. Randomly generated if empty.	`offcanvas-1`

Slots¶

Slot	Description
`title`	Offcanvas title displayed in the header.
`body`	The main offcanvas content area. Supports navigation, forms, rich text, and nested components.

Variants¶

Variant	Description
`start`	Slides in from the left.
`end`	Slides in from the right.
`top`	Slides down from the top.
`bottom`	Slides up from the bottom.