Bootstrap 5 Side Drawer
A Side Drawer in Bootstrap 5 is an off-canvas panel that slides in from the left, right, top, or bottom of the viewport, built using the Offcanvas component. It sits above page content without displacing it, making it ideal for secondary navigation, filters, or contextual detail panels. Use it when you need to surface additional UI without navigating away from the current page or breaking the main layout.
Primary Class
.side-drawerCommon Use Cases
- →E-commerce filter panels that let users narrow product listings by size, colour, and price without leaving the results page
- →Mobile navigation menus that replace a collapsed navbar with a full-height drawer containing links, account options, and a search field
- →CRM sidebars that slide open to show a contact's full activity history when a row in a data table is clicked
- →Settings panels in SaaS dashboards where users adjust notification preferences or display options without a full-page context switch
Variants & Classes
| Variant | Description |
|---|---|
| Side Drawer Default | Standard side drawer with Bootstrap's default styling. |
| Side Drawer Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#siteNav" aria-controls="siteNav">
<span class="navbar-toggler-icon"></span> Menu
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="siteNav" aria-labelledby="siteNavLabel">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title" id="siteNavLabel">Navigation</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex flex-column">
<nav class="nav flex-column gap-1">
<a class="nav-link active" href="/dashboard">Dashboard</a>
<a class="nav-link" href="/projects">Projects</a>
<a class="nav-link" href="/team">Team</a>
<a class="nav-link" href="/reports">Reports</a>
<a class="nav-link" href="/settings">Settings</a>
</nav>
<div class="mt-auto pt-3 border-top">
<a class="nav-link text-danger" href="/logout">Log out</a>
</div>
</div>
</div>Live Examples
Basic Side Drawer
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated side drawer with custom colours
- ✓Side Drawer with interactive states
- ✓Responsive side drawer for all screen sizes
Best Practices
Pin the drawer open on large screens with a CSS media query
Add a custom class and use `@media (min-width: 992px) { .offcanvas { position: relative; transform: none; visibility: visible; } }` so the drawer acts as a persistent sidebar on desktop while remaining a slide-in drawer on mobile — no JavaScript required.
Control backdrop and scroll behaviour via data attributes
Set `data-bs-backdrop="false"` and `data-bs-scroll="true"` on the offcanvas element to let users keep interacting with the page behind the drawer — useful for filter panels where you want live results updating as options are selected.
Use `offcanvas-end` for right-to-left secondary panels
Replace `offcanvas-start` with `offcanvas-end` for detail drawers that slide in from the right — this follows the natural reading flow and feels less intrusive than a left drawer for supplemental content like preview panes or chat windows.
Set a custom width with a single CSS variable override
Bootstrap 5 exposes `--bs-offcanvas-width` so you can scope a wider drawer to a specific context: `.offcanvas.filters-drawer { --bs-offcanvas-width: 380px; }` — no need to override deep selectors or add utility classes.