Bootstrap 5 Sidebar Nav
A Sidebar Nav is a vertical navigation panel fixed to the left (or right) edge of a layout, providing persistent access to primary sections of an application or website. Built with Bootstrap 5's flexbox utilities, nav components, and offcanvas or sticky positioning, it replaces top navbars in dashboard, admin, and multi-section app layouts where horizontal space is less critical than vertical hierarchy. Use it when your app has more than five top-level sections, requires nested navigation, or needs to display contextual metadata alongside links.
Primary Class
.sidebar-navCommon Use Cases
- →Admin dashboards where users switch between sections like Users, Orders, Reports, and Settings — the sidebar stays visible while the main content area changes without full page reloads.
- →SaaS application portals where each navigation item reveals sub-items (e.g., Analytics → Traffic, Conversions, Funnels) that would overflow a standard horizontal navbar.
- →Documentation sites where a persistent chapter and section tree lets readers track their position and jump between topics without losing scroll context.
- →E-learning platforms that show course modules with lesson-level links, progress indicators, and completion badges directly in the sidebar alongside the navigation items.
Variants & Classes
| Variant | Description |
|---|---|
| Sidebar Nav Default | Standard sidebar nav with Bootstrap's default styling. |
| Sidebar Nav Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="d-flex" style="min-height: 100vh;">
<!-- Sidebar -->
<nav class="d-flex flex-column flex-shrink-0 p-3 bg-dark text-white" style="width: 260px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Meridian App</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active text-white" aria-current="page">
<i class="bi bi-speedometer2 me-2"></i>Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white-50">
<i class="bi bi-people me-2"></i>Customers
</a>
</li>
<li>
<a href="#" class="nav-link text-white-50">
<i class="bi bi-cart3 me-2"></i>Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white-50">
<i class="bi bi-bar-chart-line me-2"></i>Reports
</a>
</li>
<li>
<a href="#" class="nav-link text-white-50">
<i class="bi bi-gear me-2"></i>Settings
</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown">
<img src="https://i.pravatar.cc/32" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>Sarah Okafor</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item" href="#">Billing</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</nav>
<!-- Main content -->
<main class="flex-grow-1 p-4 bg-light">
<h1 class="h3 mb-4">Dashboard Overview</h1>
<p class="text-muted">Select a section from the sidebar to get started.</p>
</main>
</div>Live Examples
Basic Sidebar Nav
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated sidebar nav with custom colours
- ✓Sidebar Nav with interactive states
- ✓Responsive sidebar nav for all screen sizes
Best Practices
Use position-sticky for in-page sidebars
Add `position-sticky` and `top-0` with `height: 100vh; overflow-y: auto;` to keep the sidebar anchored while the main content scrolls independently — this avoids the complexity of a fixed-position sidebar disrupting document flow.
Collapse to offcanvas on mobile using Bootstrap's Offcanvas component
Wrap the sidebar in a `<div class="offcanvas offcanvas-start">` and trigger it with a hamburger button on small screens; combine this with `d-none d-md-flex` on the static sidebar so desktop users see the persistent layout without JavaScript overhead.
Highlight active states with nav-pills, not nav-tabs
Use `nav nav-pills flex-column` rather than `nav-tabs` for vertical navigation — pills apply a block-level active background that feels intentional in a sidebar context, whereas tabs carry a tabbed-panel semantic that confuses screen readers in vertical layouts.
Nest sub-items with a collapsible using Bootstrap Collapse
For multi-level navigation, wrap sub-links in a `<div class="collapse" id="reportsSubmenu">` and add `data-bs-toggle="collapse" data-bs-target="#reportsSubmenu"` to the parent link — this gives you accordion-style drill-down without any custom JavaScript.