Bootstrap 5 off-canvas panels slide in from any edge of the viewport. This page covers 4 off-canvas patterns — basic, navigation menu, right panel and dark theme — each ready for mobile menus and side panels.
Quick Setup
Off-canvas requires Bootstrap 5 JS bundle:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Key Classes Reference
| Class | What It Does |
|---|---|
.offcanvas | Required wrapper element |
.offcanvas-start | Slides from left |
.offcanvas-end | Slides from right |
.offcanvas-top | Slides from top |
.offcanvas-bottom | Slides from bottom |
.offcanvas-header | Header with title and close button |
.offcanvas-title | Title text in header |
.offcanvas-body | Scrollable content area |
data-bs-backdrop="static" | Prevents close on backdrop click |
1. Basic Bootstrap 5 Off-Canvas
An off-canvas panel that slides in from the left. Triggered by a button using data-bs-toggle.
3. Bootstrap 5 Off-Canvas from Right (Cart/Filter)
Off-canvas sliding in from the right. Common for shopping carts, filters and notification panels.
4. Bootstrap 5 Dark Off-Canvas
Dark themed off-canvas using data-bs-theme='dark'. Great for dashboard and admin interfaces.
Frequently Asked Questions
Use the Offcanvas class: const offcanvas = new bootstrap.Offcanvas(document.getElementById('myOffcanvas')); offcanvas.show(). To hide: offcanvas.hide(). To toggle: offcanvas.toggle(). You can also get an existing instance: bootstrap.Offcanvas.getInstance(element).
By default the off-canvas closes when clicking the backdrop. To disable this add data-bs-backdrop='static' to the offcanvas element. This prevents closing on backdrop click but the close button and ESC key still work unless you also add data-bs-keyboard='false'.
Off-canvas slides in from the edge (left, right, top, bottom) and is typically used for navigation menus, filters and carts. Modal appears centered in the viewport and is used for dialogs, forms and alerts. Off-canvas is better for navigation and side panels.
Override the width CSS on the offcanvas element: style='width:400px' or with CSS: .offcanvas { --bs-offcanvas-width: 400px; }. For responsive width: @media (min-width: 768px) { .offcanvas { --bs-offcanvas-width: 400px; } }.
Show a hamburger button on mobile using d-lg-none and the static sidebar on desktop using d-none d-lg-flex. The off-canvas gets the mobile nav while desktop shows the permanent sidebar. Toggle the off-canvas from the hamburger button with data-bs-toggle='offcanvas'.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.