Bootstrap 5 Navbar: Responsive Examples and Customization

The Bootstrap navbar is the responsive navigation bar at the top of most Bootstrap sites: a brand on the left, links that line up in a row on wide screens, and a hamburger button that collapses them into a menu on phones. This guide starts with a complete, working navbar you can copy, explains each part, and then covers the changes people make most: links on the right, a dark or colored navbar, a sticky or fixed navbar, dropdowns, an offcanvas menu, closing the menu after a click, and fixing a toggler that doesn’t open. Everything is for Bootstrap 5.3.

A complete responsive navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="/">Brand</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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/features/">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/pricing/">Pricing</a>
        </li>
      </ul>
      <a class="btn btn-primary" href="/signup/">Sign up</a>
    </div>
  </div>
</nav>

It needs Bootstrap’s JavaScript for the collapse to work, so load the bundle before </body>:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.9/dist/js/bootstrap.bundle.min.js"></script>

On screens 992px and wider, the links sit in a row. Below that, they collapse behind the toggler button.

The parts of a navbar

Class	What it does
.navbar	The bar itself: a flex container with padding
.navbar-expand-lg	Shows the full menu from the lg breakpoint up, collapsed below it
.navbar-brand	Your logo or site name
.navbar-toggler	The hamburger button shown on small screens
.navbar-toggler-icon	The three-line icon inside the toggler
.collapse.navbar-collapse	The part that collapses; its id must match the toggler’s data-bs-target
.navbar-nav	The list of links
.nav-item, .nav-link	Each item and its link
.navbar-text	Plain text that lines up vertically with the links

Use a <nav> element so screen readers announce it as navigation, mark the current page’s link with .active and aria-current="page", and keep the toggler’s aria-label, aria-controls, and aria-expanded attributes. The same .nav and .nav-link classes also build tabs and pills for switching content inside a page.

Choosing when it collapses

The navbar-expand-* class sets the screen width at which the menu stops collapsing:

Class	Full menu from
navbar-expand-sm	576px
navbar-expand-md	768px
navbar-expand-lg	992px
navbar-expand-xl	1200px
navbar-expand-xxl	1400px
navbar-expand	Always expanded, never collapses
No expand class	Always collapsed, even on desktops

Pick the width at which your links still fit on one line. With many links or a long brand, use xl; with three short links, md is enough. See Bootstrap breakpoints for how these widths work.

Brand with a logo

Give the logo image an explicit width and height so the page doesn’t jump while it loads:

<a class="navbar-brand d-flex align-items-center gap-2" href="/">
  <img src="/logo.svg" alt="" width="32" height="32">
  <span>Brand</span>
</a>

The empty alt is right when the text next to the logo already names the site; for a logo on its own, use alt="Brand".

Aligning the links

The me-auto on .navbar-nav in the example pushes everything after the links to the right. Change it to move the links:

<!-- Links on the right -->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">...</ul>

<!-- Links in the center -->
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">...</ul>

If you are coming from Bootstrap 4, ms-auto and me-auto replace ml-auto and mr-auto. To put links on both sides, use two .navbar-nav lists, the first with me-auto. The flexbox utilities guide explains how the auto margins work.

Colors: light, dark, and branded

A navbar takes its colors from the background utility you give it, plus data-bs-theme for the text:

<!-- Light gray (the default look) -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">...</nav>

<!-- Dark -->
<nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">...</nav>

<!-- Brand color -->
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">...</nav>

data-bs-theme="dark" makes the links, brand, and toggler icon light so they read on a dark background. It replaces the .navbar-dark class, which is deprecated in Bootstrap 5.3, and .navbar-light, deprecated in 5.2. For any other color, set the background with a style or your own class and choose the matching theme:

<nav class="navbar navbar-expand-lg" style="background-color: #0f766e;" data-bs-theme="dark">...</nav>

To change link colors precisely, set the navbar’s CSS variables:

.navbar {
  --bs-navbar-color: rgba(255, 255, 255, .75);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
}

Sticky and fixed navbars

<!-- Scrolls with the page until it reaches the top, then stays there -->
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">...</nav>

<!-- Always at the top of the window -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">...</nav>

sticky-top is usually the better choice, because the navbar keeps its place in the page. fixed-top takes the navbar out of the page flow, so the content underneath slides up behind it; add top padding to the body to make room:

body { padding-top: 56px; } /* the height of your navbar */

There are also fixed-bottom and sticky-bottom for a bar at the bottom of the screen.

Dropdown menus

A dropdown sits inside a .nav-item with the dropdown class:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button"
    data-bs-toggle="dropdown" aria-expanded="false">Products</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="/builder/">Builder</a></li>
    <li><a class="dropdown-item" href="/templates/">Templates</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="/pricing/">Pricing</a></li>
  </ul>
</li>

Dropdowns need Popper, which bootstrap.bundle.min.js already includes. If you load bootstrap.min.js instead, the dropdown won’t open. Alignment, dark menus, and hover behavior are in the Bootstrap dropdown guide.

Opening dropdowns on hover. Bootstrap opens dropdowns on click, which works on touch screens and with a keyboard. If you want hover on desktop as well, add it with CSS and keep the click:

@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

An offcanvas menu

Instead of pushing the page down, the menu can slide in from the side on small screens. Replace the collapse with an offcanvas panel and point the toggler at it (for a sidebar that stays visible on desktops, see the Bootstrap sidebar guide):

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="/">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
      data-bs-target="#offcanvasNav" aria-controls="offcanvasNav" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="/">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="/features/">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="/pricing/">Pricing</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

With navbar-expand-lg, the offcanvas becomes a normal row of links from 992px up. Without an expand class, the menu always opens as a side panel, which suits app-style layouts. offcanvas-start slides it in from the left instead.

Closing the menu after a link is clicked

On one-page sites with links to sections (href="#pricing"), the collapsed menu stays open after a tap. Close it with a few lines of JavaScript:

document.querySelectorAll('.navbar-collapse .nav-link:not(.dropdown-toggle), .navbar-collapse .dropdown-item')
  .forEach(link => {
    link.addEventListener('click', () => {
      const menu = document.querySelector('.navbar-collapse.show');
      if (menu) bootstrap.Collapse.getOrCreateInstance(menu).hide();
    });
  });

The selector skips dropdown toggles, so opening a dropdown doesn’t close the whole menu.

Changing the toggler icon color

The hamburger icon is an SVG background image, so text color doesn’t change it. Set the --bs-navbar-toggler-icon-bg variable to your own SVG with the stroke color you want:

.navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2847, 85, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: transparent;
}

Change the rgba%28...%29 part, which is rgba(...) URL-encoded, to your color. To use an icon font instead, replace the <span class="navbar-toggler-icon"> with an icon, for example <i class="bi bi-list fs-2"></i> from Bootstrap Icons.

A navbar that changes on scroll

A common pattern is a transparent navbar over a hero image that gains a background once the page scrolls. Add a class with JavaScript and style it:

const nav = document.querySelector('.navbar');
addEventListener('scroll', () => {
  nav.classList.toggle('navbar-scrolled', scrollY > 40);
}, { passive: true });

.navbar { transition: background-color .2s ease, box-shadow .2s ease; }
.navbar-scrolled {
  background-color: var(--bs-body-bg);
  box-shadow: var(--bs-box-shadow-sm);
}

Use it with fixed-top, so the navbar sits over the hero until the user scrolls. If the transparent navbar has light text, remove data-bs-theme="dark" in the same script when the background turns light.

Customizing with Sass

Set these before importing Bootstrap to change every navbar:

Variable	Controls	Default
$navbar-padding-y	Top and bottom padding	$spacer * .5
$navbar-padding-x	Left and right padding	null
$navbar-nav-link-padding-x	Space between links	.5rem
$navbar-brand-font-size	Brand size	$font-size-lg
$navbar-brand-margin-end	Space after the brand	1rem
$navbar-toggler-padding-y, $navbar-toggler-padding-x	Toggler padding	.25rem, .75rem
$navbar-light-color	Link color on light navbars	Body text at 65%
$navbar-dark-color	Link color on dark navbars	White at 55%

The Bootstrap Sass variables guide explains how overrides work, and the bootstrap.build theme builder lets you adjust navbar colors and spacing visually and export the CSS.

Common navbar problems

The toggler does nothing. Check that Bootstrap’s JavaScript is loaded, that the toggler’s data-bs-target matches the collapse id (with the #), and that you use data-bs-toggle, not Bootstrap 4’s data-toggle.

The dropdown doesn’t open. Load bootstrap.bundle.min.js, which includes Popper, rather than bootstrap.min.js.

The page content hides behind the navbar. That is fixed-top at work. Add padding-top to the body, or switch to sticky-top.

The toggler icon is invisible. On a dark background, add data-bs-theme="dark" to the navbar so the icon turns light.

The links wrap onto two lines at some widths. The navbar expands at a width where the links don’t fit yet. Use a larger navbar-expand-* breakpoint or shorten the labels.

The collapsed menu has no spacing. Add mb-2 mb-lg-0 to .navbar-nav, or give the buttons inside the menu a margin on small screens.

FAQ

How do I make a responsive navbar in Bootstrap 5?

Use a <nav class="navbar navbar-expand-lg"> with a .navbar-brand, a .navbar-toggler button, and a .collapse.navbar-collapse that holds a .navbar-nav list of links. The toggler’s data-bs-target must match the collapse’s id, and Bootstrap’s JavaScript bundle must be loaded for the menu to open on small screens.

How do I align navbar links to the right in Bootstrap 5?

Add the ms-auto class to the .navbar-nav list. In Bootstrap 5 it replaces Bootstrap 4’s ml-auto. Use mx-auto to center the links instead.

Why is my Bootstrap navbar toggler not working?

Usually Bootstrap’s JavaScript isn’t loaded, the toggler’s data-bs-target doesn’t match the id of the collapse element, or the markup still uses Bootstrap 4’s data-toggle instead of data-bs-toggle. Load bootstrap.bundle.min.js before </body> and check the attributes.

How do I make a Bootstrap navbar dark?

Add bg-dark and data-bs-theme="dark" to the navbar, for example <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">. The theme attribute makes the links, brand, and toggler icon light. It replaces the navbar-dark class, which is deprecated in Bootstrap 5.3.

How do I make a Bootstrap navbar stick to the top?

Add sticky-top to the navbar to keep it at the top once the page scrolls, or fixed-top to keep it at the top at all times. With fixed-top, add padding-top to the body so content doesn’t hide behind it.

How do I change the navbar collapse breakpoint?

Change the navbar-expand-* class: navbar-expand-md shows the full menu from 768px, navbar-expand-lg from 992px, and navbar-expand-xl from 1200px. Use navbar-expand for a navbar that never collapses, or leave the class out for one that always does.

How do I close the Bootstrap navbar menu when a link is clicked?

Add a click listener to the menu’s links that calls bootstrap.Collapse.getOrCreateInstance(menu).hide() on the open .navbar-collapse. Skip dropdown toggles in the selector so opening a dropdown doesn’t close the menu.