Bootstrap 5 Navbar: 8 Customisation Patterns You Need to Know

The navbar is the first thing a visitor interacts with on your website. It sets the tone for your entire UI, guides navigation, and — when done well — disappears into the background and just works. When done poorly, it frustrates users, breaks on mobile, and undermines the credibility of your entire project.

Bootstrap 5’s navbar component is one of the most powerful and flexible pieces of the framework. It ships with responsive collapse, multiple colour schemes, support for dropdowns, forms, and utility-based spacing — all out of the box. But most developers only scratch the surface of what’s possible.

In this tutorial, we’ll walk through eight practical customisation patterns for the Bootstrap 5 navbar — from sticky behaviour and transparent overlays to mega menus and dark-mode-aware navbars. Each pattern includes real code you can copy and adapt immediately. Whether you’re building from scratch or working inside a premium template like Canvas Template, these techniques will level up your navigation game considerably.

If you’re newer to Bootstrap 5 layouts in general, it’s worth reading our guide on Bootstrap 5 Grid System: The Complete Guide for 2026 before diving in — a solid understanding of the grid will help you control navbar layouts with more precision.

Understanding the Bootstrap 5 Navbar Anatomy

Before customising anything, you need to understand the structural anatomy of a Bootstrap 5 navbar. The component is built around a handful of key classes that each play a specific role.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">MyBrand</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNav"
            aria-controls="mainNav"
            aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

The key classes to understand: navbar-expand-{breakpoint} controls at which viewport size the nav collapses. navbar-light or navbar-dark sets the icon and text colour scheme. bg-* utilities handle background colour. ms-auto on the ul pushes navigation items to the right. These are your levers — the customisation patterns below all work by adjusting these and adding targeted overrides.

Pattern 1 — Sticky vs Fixed Navbar (and When to Use Each)

One of the most common navbar requirements is keeping it visible as the user scrolls. Bootstrap 5 gives you two distinct approaches, and they behave very differently.

Fixed Top — The navbar is removed from document flow and pinned to the top of the viewport permanently. This means you must add padding-top to your body or first section to prevent content from hiding underneath it.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  ...
</nav>

<style>
  body {
    padding-top: 72px; /* match navbar height */
  }
</style>

Sticky Top — The navbar scrolls with the page until it reaches the top, then sticks. It stays in the document flow, so no body padding hack is needed.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
  ...
</nav>

Use fixed-top when you want the navbar always visible regardless of page position — ideal for single-page apps. Use sticky-top for content-heavy pages like blogs or documentation where the user might want to scroll past the hero before the nav sticks.

Pattern 2 — Transparent Overlay Navbar Over Hero Images

This is one of the most visually impactful navbar techniques — overlaying the nav on a full-height hero section with a transparent background that transitions to solid on scroll. It’s a staple of landing pages built with Canvas Template and requires a small combination of CSS and JavaScript.

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="siteNav">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <!-- nav items -->
  </div>
</nav>

<style>
  #siteNav {
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  #siteNav.scrolled {
    background-color: #1a1a2e;
    box-shadow: 0 2px 20px rgba(0,0,0,0.15);
  }
</style>

<script>
  window.addEventListener('scroll', function () {
    const nav = document.getElementById('siteNav');
    if (window.scrollY > 60) {
      nav.classList.add('scrolled');
    } else {
      nav.classList.remove('scrolled');
    }
  });
</script>

This pattern works brilliantly with full-screen hero sections. If you’re building a landing page and want to see it in context, check out our guide on How to Build a Landing Page with Bootstrap 5 in Under 1 Hour — the transparent navbar is one of the first elements we set up there.

Pattern 3 — Custom Colour Schemes Using CSS Variables

Bootstrap 5 replaced the old SASS-only theming approach with CSS custom properties for many components. The navbar in Bootstrap 5.3+ uses component-level CSS variables that you can override without touching a single SASS file.

<nav class="navbar navbar-expand-lg" id="customNav">
  ...
</nav>

<style>
  #customNav {
    --bs-navbar-color: #e2e8f0;
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #63b3ed;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #63b3ed;
    --bs-navbar-toggler-border-color: rgba(255,255,255,0.2);
    background-color: #1e3a5f;
    padding: 1rem 0;
  }
</style>

This approach is far cleaner than overriding deeply nested selectors. It also plays well with Bootstrap’s dark mode system introduced in v5.3. For a deeper look at customising templates without breaking things, read our post on How to Customise a Bootstrap 5 HTML Template Without Breaking It — the same CSS variable philosophy applies to navbars.

Pattern 4 — Building a Mega Menu with Bootstrap 5

Mega menus are essential for content-rich websites — SaaS products, e-commerce stores, agency sites with large service portfolios. Bootstrap 5 doesn’t include a mega menu out of the box, but you can build one cleanly by combining the dropdown component with the grid system.

<li class="nav-item dropdown position-static">
  <a class="nav-link dropdown-toggle" href="#"
     data-bs-toggle="dropdown"
     aria-expanded="false">Solutions</a>
  <div class="dropdown-menu w-100 mt-0 rounded-0 border-0 shadow-lg p-4">
    <div class="row g-4">
      <div class="col-lg-3">
        <h6 class="text-uppercase text-muted small fw-semibold mb-3">Product</h6>
        <a class="dropdown-item px-0" href="#">Features</a>
        <a class="dropdown-item px-0" href="#">Pricing</a>
        <a class="dropdown-item px-0" href="#">Changelog</a>
      </div>
      <div class="col-lg-3">
        <h6 class="text-uppercase text-muted small fw-semibold mb-3">Company</h6>
        <a class="dropdown-item px-0" href="#">About Us</a>
        <a class="dropdown-item px-0" href="#">Blog</a>
        <a class="dropdown-item px-0" href="#">Careers</a>
      </div>
      <div class="col-lg-6 bg-light rounded p-3">
        <h6 class="fw-semibold mb-2">Featured Resource</h6>
        <p class="text-muted small">Get started with our quick-start guide and launch in minutes.</p>
        <a href="#" class="btn btn-sm btn-primary">Read Guide →</a>
      </div>
    </div>
  </div>
</li>

<style>
  .navbar .dropdown-menu {
    left: 0;
    right: 0;
    top: 100%;
  }
  .navbar .position-static {
    position: static !important;
  }
</style>

The key trick here is position-static on the parent li — this makes the dropdown menu position itself relative to the navbar container instead of the list item, giving you full-width behaviour. Canvas Template ships with pre-built mega menu components that follow exactly this pattern, so you won’t need to build from scratch if you’re working with it.

Pattern 5 — Adding a CTA Button and Search to the Navbar

A navbar that ends with a prominent CTA button converts far better than one that simply lists links. Bootstrap 5 makes it straightforward to add buttons and inline forms.

<div class="collapse navbar-collapse" id="mainNav">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
  </ul>

  <!-- Inline search form -->
  <form class="d-flex me-3" role="search">
    <input class="form-control form-control-sm me-2"
           type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-secondary btn-sm" type="submit">Go</button>
  </form>

  <!-- CTA Buttons -->
  <a href="#" class="btn btn-outline-primary btn-sm me-2">Log In</a>
  <a href="#" class="btn btn-primary btn-sm">Start Free Trial</a>
</div>

On mobile, these elements collapse inside the hamburger menu by default. If you want the CTA button to always be visible outside the collapse, place it between the toggler button and the collapse div — Bootstrap 5’s flex layout will handle the positioning correctly.

<!-- Always-visible mobile CTA (outside collapse) -->
<a href="#" class="btn btn-primary btn-sm ms-auto me-2 d-lg-none">Get Started</a>
<button class="navbar-toggler" ...>...</button>

Pattern 6 — Dark Mode-Aware Navbar with Bootstrap 5.3

Bootstrap 5.3 introduced native dark mode support via the data-bs-theme attribute. Navbars can now adapt automatically to light and dark themes without any custom JavaScript.

<!-- Explicit dark navbar -->
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
  ...
</nav>

<!-- Or on the root HTML element for global dark mode -->
<html data-bs-theme="dark">

For a toggle button that switches the entire page between light and dark:

<button id="themeToggle" class="btn btn-sm btn-outline-secondary ms-3">
  Toggle Theme
</button>

<script>
  const toggleBtn = document.getElementById('themeToggle');
  toggleBtn.addEventListener('click', function () {
    const html = document.documentElement;
    const current = html.getAttribute('data-bs-theme');
    html.setAttribute('data-bs-theme', current === 'dark' ? 'light' : 'dark');
  });
</script>

Combined with CSS custom properties from Pattern 3, you can create a navbar that has completely different colour palettes for each mode — all driven by the single data-bs-theme attribute change.

Pattern 7 — Navbar Typography and Logo Branding

The navbar-brand element accepts images, SVGs, text, or combinations of both. Getting this right is a branding fundamental. Typography choices in your navbar should align with your overall type scale — something we cover in depth in our Bootstrap 5 Typography: Fonts, Sizes, and Hierarchy Explained guide.

<!-- Logo + wordmark combination -->
<a class="navbar-brand d-flex align-items-center gap-2" href="#">
  <img src="logo.svg" alt="Brand Logo" width="32" height="32">
  <span class="fw-bold fs-5 text-white">BrandName</span>
</a>

<!-- Retina-ready logo using CSS -->
<style>
  .navbar-brand img {
    height: 36px;
    width: auto;
  }
  @media (min-width: 992px) {
    .navbar-brand img {
      height: 44px;
    }
  }
</style>

Always define the width and height attributes on your logo image to prevent layout shifts. Use SVG format wherever possible for crisp rendering at any resolution.

Pattern 8 — Accessible Off-Canvas Navbar for Mobile

The traditional collapse hamburger menu works fine, but for complex navigation structures, Bootstrap 5’s off-canvas component delivers a superior mobile experience. It slides in from the side, has a proper overlay backdrop, and handles focus trapping for accessibility.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>

    <!-- Offcanvas trigger -->
    <button class="navbar-toggler" type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#mobileNav"
            aria-controls="mobileNav"
            aria-label="Open navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Desktop nav -->
    <div class="d-none d-lg-flex ms-auto align-items-center gap-4">
      <a class="nav-link text-white" href="#">Features</a>
      <a class="nav-link text-white" href="#">Pricing</a>
      <a href="#" class="btn btn-primary btn-sm">Get Started</a>
    </div>
  </div>
</nav>

<!-- Off-canvas panel -->
<div class="offcanvas offcanvas-end text-bg-dark"
     tabindex="-1"
     id="mobileNav"
     aria-labelledby="mobileNavLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="mobileNavLabel">Menu</h5>
    <button type="button" class="btn-close btn-close-white"
            data-bs-dismiss="offcanvas"
            aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="navbar-nav flex-column gap-2">
      <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
    </ul>
    <a href="#" class="btn btn-primary w-100 mt-4">Get Started</a>
  </div>
</div>

The off-canvas approach is particularly powerful for mobile mega-menus where you want accordion-style nested navigation. Bootstrap handles all the focus management and ARIA states automatically — just make sure your aria-label attributes are descriptive for screen reader users.

Navbar Pattern Comparison at a Glance

Frequently Asked Questions

How do I change the Bootstrap 5 navbar breakpoint?

Replace navbar-expand-lg with navbar-expand-sm, navbar-expand-md, or navbar-expand-xl depending on when you want the navbar to expand from the hamburger view to the full horizontal layout. Use navbar-expand (without a breakpoint suffix) to always show the expanded layout.

How do I centre navbar items in Bootstrap 5?

Use mx-auto on your ul.navbar-nav element to centre the navigation links. If you have a brand on the left and a CTA on the right, use a combination of me-auto and ms-auto on separate nav sections to achieve a three-column layout.

Can I use multiple navbars on the same page?

Yes. Bootstrap 5 navbars are scoped by class, not global IDs — you can stack a top utility bar and a main navbar, for example. Just ensure each collapsible section has a unique id that matches its corresponding data-bs-target attribute on the toggler button.

How do I make the Bootstrap navbar logo change on scroll?

Use the same scroll event listener from Pattern 2. Store two versions of your logo (light and dark) and swap the src attribute of the img tag when the scrolled class is added. Alternatively, use two absolutely positioned logo images and toggle their visibility with CSS transitions — smoother and avoids a flash.

Is the Bootstrap 5 navbar accessible by default?

Bootstrap 5’s navbar includes ARIA attributes by default — aria-expanded on the toggler and aria-controls linking to the collapse target. However, you should always add a meaningful aria-label to your nav element (e.g., aria-label="Main navigation") and ensure dropdown menus are keyboard navigable. The off-canvas pattern (Pattern 8) handles focus trapping automatically, making it the most accessible mobile nav option.

Final Thoughts

The Bootstrap 5 navbar is genuinely one of the framework’s most production-ready components — but only if you know how to drive it. These eight patterns cover the vast majority of real-world requirements: from the basics of sticky positioning to advanced mega menus, scroll-aware transparency, dark mode support, and accessible off-canvas panels for mobile users.

The real power comes from combining patterns. A landing page might use the transparent overlay technique (Pattern 2), CSS variable colour theming (Pattern 3), a CTA button (Pattern 5), and the off-canvas mobile panel (Pattern 8) all at once. Each layer adds polish without adding bloat.

If you want a head start with all of these patterns pre-built and production-tested, Canvas Template ships with multiple navbar variants already wired up — including mega menus, transparent variants, and dark/light switchers. And if you’d rather skip the template setup entirely, CanvasBuilder is the AI website builder that generates Bootstrap 5 layouts — including full navbar configurations — from a simple prompt. Both tools are designed to get you from idea to live site faster, without compromising on code quality.

Ready to build?
Explore the full Canvas Template library at canvastemplate.com or try the AI-powered builder at canvasbuilder.co.