Bootstrap Navbar

Bootstrap Navbar Overview

A Bootstrap navbar starts with the .navbar class combined with a navbar-expand-{breakpoint} modifier, which determines the screen size at which the menu switches from a collapsed hamburger button to a fully expanded horizontal menu. Inside, .navbar-brand holds the site logo or name, and .navbar-nav holds the list of navigation links.

Below that breakpoint, .navbar-toggler renders a hamburger button that triggers the Bootstrap Collapse JavaScript plugin via data-bs-toggle and data-bs-target attributes, sliding the .navbar-collapse container open and closed without any custom JavaScript.

Bootstrap Navbar Example

<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 ms-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="/pricing">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-expand-lg keeps the menu collapsed below the lg breakpoint, showing the navbar-toggler hamburger button instead. Clicking it toggles the navbar-collapse container identified by id="mainNav", which the toggler references through data-bs-target. The ms-auto class pushes the nav links to the right on larger screens.

Top 10 Bootstrap Navbar Examples

These are the navbar building blocks you'll use to assemble responsive site navigation.

Popular Real-World Bootstrap Navbar Examples

These navbar patterns cover the majority of real-world site header requirements.

Best Practices

• Choose the navbar-expand-{breakpoint} that matches when your link list stops fitting comfortably in one row.
• Always include aria-label on the navbar-toggler button, since navbar-toggler-icon has no visible text.
• Give the collapse target a unique id and reference it correctly in data-bs-target.
• Use aria-current="page" on the active nav-link for accessibility and SEO clarity.
• Keep the navbar-brand short and always link it back to the homepage.
• Use ms-auto to push secondary nav content (like a CTA button) to the right without extra markup.
• Test the collapsed mobile menu for tap target size and spacing on real devices.

Common Mistakes

• Mismatching the data-bs-target selector and the collapse container's id, breaking the toggle.
• Forgetting the aria-controls and aria-expanded attributes on the toggler button.
• Choosing too small an expand breakpoint, causing links to wrap awkwardly before collapsing.
• Nesting a container incorrectly, leaving the toggler outside the visible header area on mobile.
• Not adding active state classes, leaving users unsure which page they're on.
• Overcrowding the navbar with too many top-level links instead of using a dropdown.

Key Takeaways

• navbar-expand-{breakpoint} controls when the menu switches between collapsed and expanded.
• navbar-toggler and navbar-collapse work together via data-bs-toggle and data-bs-target.
• navbar-brand, navbar-nav, and nav-link form the core content structure.
• Utility classes like ms-auto and fixed-top/sticky-top extend common navbar behaviors.
• Accessible attributes (aria-label, aria-current, aria-expanded) are essential for a usable navbar.