How to Create a Responsive Navbar in Bootstrap 5

Building a responsive navbar in Bootstrap 5 is simpler than most people think. The framework handles all the collapse logic with data attributes — no JavaScript needed beyond the Bootstrap bundle.

Here's how to build one properly, starting from nothing.

The Minimal Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">

    <!-- Brand -->
    <a class="navbar-brand fw-bold" href="/">MyApp</a>

    <!-- Mobile toggle button -->
    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarMain"
      aria-controls="navbarMain"
      aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarMain">
      <ul class="navbar-nav me-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="/components">Components</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about">About</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

That's it. This navbar collapses into a hamburger menu on screens below 992px. On desktop it shows links horizontally. No CSS needed.

How the Collapse Works

The key is the connection between the button and the collapsible div:

• data-bs-target="#navbarMain" on the button
• id="navbarMain" on the div
• class="collapse navbar-collapse" on the div

Bootstrap JS reads the data-bs-target attribute and toggles the collapse class on the matching element. The navbar-collapse class tells Bootstrap this is a navbar collapse specifically (adds some padding/margin adjustments).

Adding Active States

For a static site, just add active to the current page's nav-item:

<li class="nav-item">
  <a class="nav-link active" aria-current="page" href="/">Home</a>
</li>

The aria-current="page" is for accessibility — screen readers announce the current page.

For a server-rendered app, compare the request path to each link's href and add active conditionally.

Adding a Dropdown

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    Products
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="/angular">Angular Templates</a></li>
    <li><a class="dropdown-item" href="/react">React Templates</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="/templates">All Templates</a></li>
  </ul>
</li>

The data-bs-toggle="dropdown" attribute handles the open/close. On mobile this becomes an accordion-style expand inside the collapsed navbar.

Adding a CTA Button on the Right

Use ms-auto on the nav links wrapper to push a button to the right:

<div class="collapse navbar-collapse" id="navbarMain">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <!-- nav links -->
  </ul>

  <!-- This sits on the right -->
  <a href="/signup" class="btn btn-primary">Get Started</a>
</div>

Making the Navbar Sticky

Add sticky-top to the <nav> element:

<nav class="navbar navbar-expand-lg bg-white border-bottom sticky-top shadow-sm">

sticky-top keeps the navbar in the document flow. It sticks to the top when you scroll past it but doesn't affect page layout. No body padding needed.

If you need the navbar always visible at the top regardless of position, use fixed-top instead:

<nav class="navbar navbar-expand-lg bg-dark fixed-top" data-bs-theme="dark">

With fixed-top you need to add padding to the body to prevent content going under the navbar:

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

Complete Working Navbar

Here's the full navbar with brand, links, dropdown, search and a CTA button:

<nav class="navbar navbar-expand-lg bg-white border-bottom sticky-top shadow-sm">
  <div class="container">

    <a class="navbar-brand fw-bold" href="/" style="color:#fd4766;">
      BootstrapPlanet
    </a>

    <button class="navbar-toggler border-0" type="button"
      data-bs-toggle="collapse" data-bs-target="#mainNav">
      <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" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/components">Components</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            Resources
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/tutorials">Tutorials</a></li>
            <li><a class="dropdown-item" href="/vs">Comparisons</a></li>
          </ul>
        </li>
      </ul>

      <form class="d-flex me-2" role="search">
        <input class="form-control form-control-sm me-2" type="search"
          placeholder="Search..." style="max-width:200px;">
      </form>

      <a href="https://lettstartdesign.com" class="btn btn-sm text-white fw-semibold"
        style="background:#fd4766;" target="_blank">
        Templates ↗
      </a>
    </div>

  </div>
</nav>

Common Issues

Hamburger shows on desktop: You're missing navbar-expand-lg. Make sure the nav has this class.

Dropdown not opening: You're using bootstrap.min.js without Popper. Use bootstrap.bundle.min.js which includes Popper.js.

Content going under fixed navbar: Add padding-top: 56px to body when using fixed-top. Not needed with sticky-top.

Links not collapsing after click on mobile: Close the navbar manually by triggering a click on the toggle button, or use JavaScript to hide the collapse on link click.