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.
Bootstrap 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 and classes
| Variant | Description and classes |
|---|---|
| Offcanvas left | Slides in from the left edge.offcanvas offcanvas-start |
| Offcanvas right | Slides in from the right edge.offcanvas offcanvas-end |
| Offcanvas bottom | Slides up from the bottom.offcanvas offcanvas-bottom |
| Responsive offcanvas | Behaves as an offcanvas below lg and as normal page content from lg up.offcanvas-lg offcanvas-start |
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>Live examples
Mobile Navigation Drawer
A navigation drawer that slides in from the left. The close button, the backdrop and Escape close it.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- 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.