Bootstrap 5 Offcanvas
Bootstrap 5 offcanvas is a sidebar/drawer component that slides in from the left, right, top, or bottom of the viewport. It's commonly used for mobile navigation menus, shopping cart drawers, filter panels, and notification feeds. It replaced many jQuery modal/sidebar patterns in modern Bootstrap apps.
Primary Class
.offcanvasCommon Use Cases
- →Mobile hamburger menu drawer
- →Shopping cart sidebar
- →Filter panel in product listings
- →Notification feed panel
- →Settings drawer
- →Navigation mega-menu on mobile
Variants & Classes
| Variant | Description |
|---|---|
| Offcanvas left | Slides in from the left edge. |
| Offcanvas right | Slides in from the right edge. |
| Offcanvas bottom | Slides up from the bottom. |
| Responsive offcanvas | Only activates as offcanvas below a breakpoint; displays inline above. |
Code Example
<!-- Toggle button -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu">
<span class="navbar-toggler-icon"></span> Menu
</button>
<!-- Offcanvas panel -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileMenu" aria-labelledby="mobileMenuLabel">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title fw-bold" id="mobileMenuLabel">Navigation</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<nav class="d-flex flex-column gap-2">
<a href="/features" class="text-decoration-none fw-semibold text-dark py-2 border-bottom">Features</a>
<a href="/pricing" class="text-decoration-none fw-semibold text-dark py-2 border-bottom">Pricing</a>
<a href="/blog" class="text-decoration-none fw-semibold text-dark py-2 border-bottom">Blog</a>
<a href="/signup" class="btn btn-primary mt-3">Get Started Free</a>
</nav>
</div>
</div>Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Cart drawer from right with product list
- ✓Mobile nav with accordion sub-menus
- ✓Filter sidebar for product grid
- ✓Notification feed offcanvas right
- ✓Mega menu drawer for complex navigation
Best Practices
Use offcanvas-lg for responsive navigation
offcanvas-lg makes the sidebar behave as a normal inline element on large screens and as a drawer on smaller screens. Perfect for navigation sidebars that should always be visible on desktop.
Add a backdrop to focus attention
By default, Bootstrap offcanvas shows a backdrop that dims the page behind the panel. This focuses attention on the offcanvas content. Disable it with data-bs-backdrop='false' only when the offcanvas overlays a non-primary section.