Offcanvas

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

How it works

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke Bootstrap’s JavaScript.

Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
Similarly, some source Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s variables.
When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
Similar to modals, only one offcanvas can be shown at a time.

Heads up! Given how CSS handles animations, you cannot use margin or translate in a Bootstrap offcanvas element. Instead, use the class as an independent wrapping element.

Offcanvas components

Below is an offcanvas example that is displayed when the button is clicked. Add @props="offcanvas-toggle" to an <xref> element to associate a button to an offcanvas

Click here to display offcanvas

Content for the offcanvas goes here. You can place just about any section elements here.

<xref outputclass="btn-primary" props="offcanvas-toggle" href="#offcanvas1">
  Click here
</xref>
<section outputclass="offcanvas-start" id="offcanvas1">
  <title>Offcanvas</title>
  <p>
    Content for the offcanvas goes here. You can place just about any section elements here.
  </p>
</section>

Placement

There’s no default placement for offcanvas components, so you must add one of the modifier outputclasses below

Setting @outputclass="offcanvas-start" places offcanvas on the left of the viewport (shown above)
Setting @outputclass="offcanvas-end" places offcanvas on the right of the viewport
Setting @outputclass="offcanvas-bottom" places offcanvas on the bottom of the viewport
Setting @outputclass="offcanvas-top" places offcanvas on the top of the viewport

Toggle right offcanvas

Content for the offcanvas goes here. You can place just about any section elements here.

<section outputclass="offcanvas-end">
  ...etc
<section>

Toggle bottom offcanvas

Content for the offcanvas goes here. You can place just about any section elements here.

<section outputclass="offcanvas-bottom">
  ...etc
<section>

Responsive

Responsive offcanvas outputclasses hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, @outputclass="offcanvas-lg" hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.

Note: Resize your browser to show the responsive offcanvas toggle.

Toggle offcanvas

This is content within an @outputclass="offcanvas-lg".

Responsive offcanvas classes are available across for each breakpoint.

@outputclass="offcanvas"
@outputclass="offcanvas-sm"
@outputclass="offcanvas-md"
@outputclass="offcanvas-lg"
@outputclass="offcanvas-xl"
@outputclass="offcanvas-xxl"

<note outputclass="alert-info d-none d-lg-block">
  Resize your browser to show the responsive offcanvas toggle.
</note>
<xref outputclass="btn-primary d-lg-none" props="offcanvas-toggle" href="#offcanvas4">
  Toggle offcanvas
</xref>
<section outputclass="offcanvas-lg" id="offcanvas4">
  <title>Offcanvas</title>
  <p>
    This is content within an <xmlatt>outputclass="offcanvas-lg"</xmlatt>.
  </p>
</section>