Offcanvas

An offcanvas is a hidden sidebar that slides in from an edge: .offcanvas-start, .offcanvas-end, .offcanvas-top or .offcanvas-bottom. It shares code with the modal plugin, so it also has a backdrop, closes with Escape, and disables body scrolling; data-bs-scroll="true" keeps the page scrollable. Responsive classes such as .offcanvas-lg show the content inline at the lg breakpoint and above and turn it into an offcanvas below. Since 5.3, data-bs-theme="dark" gives it a dark color mode.

A dark offcanvas menu opened from the leftHTMLLive

<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<button class="btn btn-primary m-3" data-bs-toggle="offcanvas" data-bs-target="#menu"
  aria-controls="menu">Menu</button>
<div class="offcanvas offcanvas-start" data-bs-theme="dark" tabindex="-1" id="menu"
  aria-labelledby="menuTitle" style="width: 16rem">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="menuTitle">Store</h2>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <nav class="nav flex-column"><a class="nav-link" href="#">Products</a>
      <a class="nav-link" href="#">Orders</a><a class="nav-link" href="#">Account</a></nav>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script>bootstrap.Offcanvas.getOrCreateInstance('#menu').show();</script>

Browser output of 17

Use an offcanvas for navigation or filters, and a modal when you need an answer before work continues. Like a modal, place it near the top of <body>: an ancestor with a CSS transform would misplace the fixed panel.

MENU