Skip to main content

Offcanvas

Build hidden, slide-in sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

How it works

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons trigger it via data-boodoo-toggle="offcanvas" and data-boodoo-target.

Live demo

<button class="btn btn-primary" type="button"
        data-boodoo-toggle="offcanvas" data-boodoo-target="#offcanvasExample"
        aria-controls="offcanvasExample">
  Open left offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-boodoo-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Some text to show in the offcanvas panel.
  </div>
</div>
Left offcanvas

Content for the left offcanvas.

Right offcanvas
Switch your direction with offcanvas-end.

Placements

  • .offcanvas-start — slides in from the left (default).
  • .offcanvas-end — slides in from the right.
  • .offcanvas-top — slides down from the top.
  • .offcanvas-bottom — slides up from the bottom.
Top offcanvas
Content from the top.
Bottom offcanvas
Content from the bottom.

Body scrolling

By default, opening an offcanvas locks the body scroll (adding modal-open to <body>). Set data-boodoo-scroll="true" on the offcanvas to allow body scrolling while it's open.

<div class="offcanvas offcanvas-start" data-boodoo-scroll="true">...</div>

Static backdrop

Use data-boodoo-backdrop="static" to prevent closing when clicking the backdrop.

<div class="offcanvas offcanvas-start" data-boodoo-backdrop="static">...</div>