Offcanvas

How it works?

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport.

Basic example

Click the accordions below to expand/collapse the accordion content.

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

<x-offcanvas.toggle class="btn btn-primary" id="BasicExample">Toggle Basic Offcanvas</x-offcanvas.toggle>
<x-offcanvas id="BasicExample">
    <x-offcanvas.header title="Basic Offcanvas" />

    <x-offcanvas.body>
        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
    </x-offcanvas.body>
</x-offcanvas>

<button class="btn btn-primary"
      data-bs-toggle="offcanvas"
      href="#offcanvasBasicExample"
      aria-controls="offcanvasBasicExample">Toggle Basic Offcanvas</button>
<div class="offcanvas offcanvas-start"
     tabindex="-1"
     id="offcanvasBasicExample"
     aria-labelledby="offcanvasBasicExampleLabel">
  <div class="offcanvas-header"
       title="Basic Offcanvas">
    <h5 class="offcanvas-title"
        id="offcanvasBasicExampleLabel">
      Basic Offcanvas
    </h5>
  </div>

  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>