How to use Bootstrap’s new offcanvas component for better mobile navigation?

Bootstrap 5's offcanvas slides in a sleek sidebar from screen edges perfect for mobile navs that save space without cramping your main content, triggered by a simple hamburger button.​

Offcanvas beats bulky mobile menus by hiding nav behind a smooth slide-in panel (left, right, top, or bottom), keeping your viewport clean until tapped. Just add data-bs-toggle="offcanvas" to a button and .offcanvas-start class to the menu. Bootstrap's JS handles the overlay, backdrop, and swipe gestures automatically. Customize width with w-50 or position per breakpoint; debug by checking JS bundle loads and no z-index clashes with other modals. Mobile users love the native feel, and desktop gets a pro sidebar vibe.

Code

<button class="btn btn-primary d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#mobileNav">☰ Menu</button>

<div class="offcanvas offcanvas-start" id="mobileNav">
  <div class="offcanvas-header">
    <h5>Navigation</h5>
    <button class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <nav class="offcanvas-body">
    <ul class=" nav flex-column">
      <li><a href="#" class="nav-link">Home</a></li>
      <li><a href="#" class="nav-link">About</a></li>
      <li><a href="#" class="nav-link">Contact</a></li>
    </ul>
  </nav>
</div>

<!-- Make sure to include the Bootstrap JS bundle -->
<script src="bootstrap.bundle.min.js"></script>