Bootstrap 5 sidebars provide vertical navigation for dashboards and admin panels. This page covers 4 sidebar patterns — basic, dark, collapsible and icon-only — each built with Bootstrap utilities.
Quick Setup
Sidebars require Bootstrap 5 JS for collapse:
<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 |
|---|---|
.nav.flex-column | Vertical nav stack |
.nav-link | Each sidebar link |
.nav-link.active | Currently selected item |
.position-sticky | Sticks sidebar on scroll |
data-bs-toggle="collapse" | Toggles sub-menu |
.offcanvas | Mobile slide-in sidebar |
1. Basic Bootstrap 5 Sidebar
A simple vertical sidebar navigation with active state and hover effects.
2. Bootstrap 5 Dark Sidebar
Dark themed sidebar for admin dashboards and SaaS applications.
3. Bootstrap 5 Collapsible Sidebar Menu
Sidebar with collapsible sub-menu sections using Bootstrap collapse component.
4. Bootstrap 5 Icon-Only Collapsed Sidebar
A compact icon-only sidebar that expands on hover. Common in modern dashboards.
Frequently Asked Questions
Add position-sticky top-0 to the sidebar element and set a height: <nav class='position-sticky top-0' style='height:100vh;overflow-y:auto'>. This keeps the sidebar visible while the main content scrolls. The parent must not have overflow:hidden.
Use Bootstrap's off-canvas component for mobile: data-bs-toggle='offcanvas' on a burger button and offcanvas offcanvas-start on the sidebar. On desktop show the static sidebar with d-none d-lg-flex. This is the cleanest approach for responsive sidebars.
Use Bootstrap's collapse component: add data-bs-toggle='collapse' and data-bs-target='#submenuId' to the parent nav item button. Wrap sub-items in a div with collapse class and the matching id. Add show class to keep it expanded by default.
Add an active class to the current nav-link and style it: .nav-link.active { background: rgba(253,71,102,0.1); color: #fd4766; }. In a server-rendered app compare the current URL to each link's href. In a SPA listen to route changes and update the active class.
Add a resize handle div at the right edge of the sidebar. Listen to mousedown on it, then track mousemove to update the sidebar width: sidebar.style.width = e.clientX + 'px'. Add mouseup listener to stop resizing. Set a min-width and max-width to prevent extreme sizes.
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.