Offcanvas

Sliding panels from any edge of the screen

Offcanvas panels slide in from any edge of the screen. They are useful for sidebars, menus, and detail panels that do not need their own page.

The default .offcanvas-start slides a panel in from the left edge. It typically holds navigation links or filters.

<div class="offcanvas offcanvas-start"
  id="sidebar">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Menu</h5>
    <button class="btn-close"
      data-bs-dismiss="offcanvas">
    </button>
  </div>
  <div class="offcanvas-body">
    Sidebar content here.
  </div>
</div>

.offcanvas-start slides from the left

28 / 37