What Is a Navigation Bar?

A navigation bar, often called a navbar, helps visitors find their way around a website. It commonly appears at the top of a page and contains the website’s name, logo, and important links.

Bootstrap provides a ready-made navbar component that adapts to different screen sizes. On large screens, links can appear side by side. On smaller screens, the same links can collapse behind a menu button.

Create Your First Navbar

Bootstrap uses the navbar class as the foundation. Add a background class and a container to give the navigation bar its structure.

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      MyWebsite
    </a>
  </div>
</nav>

Add Menu Items

A useful navbar needs links. Bootstrap uses navbar-nav for the link collection, nav-item for each item, and nav-link for the actual links.

<ul class="navbar-nav">
  <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="#about">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact">Contact</a>
  </li>
</ul>

The active class highlights the current page. The aria-current="page" attribute communicates the current page to assistive technology.

Make Your Navbar Mobile-Friendly

One of Bootstrap’s most useful features is its responsive navigation. The class navbar-expand-lg means the menu expands horizontally at Bootstrap’s large breakpoint (992px and above).

Below that width, you can display a hamburger button that opens and closes the navigation links.

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

    <a class="navbar-brand" href="#">MyWebsite</a>

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

    <div class="collapse navbar-collapse" id="mainMenu">
      <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="#about">About</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

Customize Navbar Colors

Bootstrap includes background utilities and color modes that make navbar customization easier. For example, you can create a dark navigation bar with light-colored text.

<nav class="navbar navbar-expand-lg bg-dark"
     data-bs-theme="dark">
  <!-- Your navbar content -->
</nav>

You can also experiment with bg-primary, bg-light, or bg-body-tertiary. Use data-bs-theme="dark" when you want Bootstrap’s navbar colors and toggle icon to suit a dark background.

Align Your Navigation Links

Bootstrap spacing utilities help control where navbar content appears.

<ul class="navbar-nav ms-auto">
  <!-- Navigation items -->
</ul>

The ms-auto class applies automatic margin at the start side, pushing the menu toward the end of the navbar in a standard left-to-right layout.

You can also use me-auto to push following content away, and gap-2 to create spacing between elements.