Bootstrap 5 Sidebar Nav

Q: How do I make the sidebar full-height without it affecting page scroll?

Wrap your entire layout in a d-flex container with min-height: 100vh (or vh-100 if you want strict clamping). Give the sidebar flex-shrink-0 and a fixed width, and make the main content area flex-grow-1 overflow-y-auto. The sidebar itself gets height: 100vh; overflow-y: auto; via inline style or a custom CSS class so it scrolls independently if its nav items exceed the viewport. This is the pattern used in Bootstrap's own sidebar example.

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.

Bootstrap class

No dedicated Bootstrap class

Common 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 and classes

Variant	Description and classes	Classes
Dark sidebar	Full-height column with brand, links and a profile menu.`d-flex flex-column flex-shrink-0 p-3 text-bg-dark`	`d-flex flex-column flex-shrink-0 p-3 text-bg-dark`
Vertical pills	Links stacked as pills with an active state.`nav nav-pills flex-column`	`nav nav-pills flex-column`
Offcanvas on mobile	Sidebar slides in from the left below the lg breakpoint.`offcanvas-lg offcanvas-start`	`offcanvas-lg offcanvas-start`
Profile dropdown	Account menu at the bottom of the sidebar.`dropdown + dropdown-menu dropdown-menu-dark`	`dropdown + dropdown-menu dropdown-menu-dark`

Code example

HTML

<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

Dark sidebar with pill links and a profile dropdown. It sits beside the content from the md breakpoint and stacks above it on phones.

Example 1

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:

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.

FAQ

How do I make the sidebar full-height without it affecting page scroll?

Wrap your entire layout in a d-flex container with min-height: 100vh (or vh-100 if you want strict clamping). Give the sidebar flex-shrink-0 and a fixed width, and make the main content area flex-grow-1 overflow-y-auto. The sidebar itself gets height: 100vh; overflow-y: auto; via inline style or a custom CSS class so it scrolls independently if its nav items exceed the viewport. This is the pattern used in Bootstrap's own sidebar example.

How can I change the sidebar background colour and active link style to match my brand?

Override Bootstrap's CSS custom properties rather than hard-coding hex values. Set --bs-nav-pills-link-active-bg: #your-brand-color; on the .nav element or in your root stylesheet. For the sidebar background itself, either use one of Bootstrap's bg-* utilities (bg-primary, bg-dark, bg-light) or write a custom class like .sidebar { background-color: var(--brand-surface); }. For hover states on inactive links, target .nav-link:hover with background-color and color overrides. Avoid using !important by ensuring your stylesheet loads after Bootstrap's.

How does Canvas Builder generate Sidebar Nav components?

When you describe a dashboard, admin panel, or multi-section app layout in Canvas Builder, the AI automatically scaffolds the full sidebar structure (including the flexbox wrapper, nav-pills list, active state on the first item, and a user profile dropdown at the bottom) as production-ready Bootstrap 5 HTML. It reads your brand colour from your project settings and injects it as a CSS custom property override, so the active pill and sidebar background reflect your palette without any manual CSS editing.