The Navbar

The Navbar

The navbar is a responsive navigation header. Use .navbar with .navbar-expand-{breakpoint} to control when the menu collapses.

Basic navbar

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <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>
    </ul>
  </div>
</nav>

The key classes

• .navbar is the base class.
• .navbar-expand-sm keeps the navbar horizontal on small screens and up.
• .bg-dark sets a dark background.
• .navbar-dark styles the text light (for dark backgrounds).
• .navbar-light styles the text dark (for light backgrounds).
• .navbar-brand styles the logo or site name.
• .navbar-nav wraps the nav links.

Brand

The .navbar-brand class is used for the site name or logo:

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

Navbar with hamburger menu

On smaller screens, the menu collapses behind a toggle button:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

The .navbar-toggler and data-bs-toggle="collapse" create the hamburger menu on small screens.

Fixed navigation

• .fixed-top fixes the navbar to the top.
• .fixed-bottom fixes it to the bottom.
• .sticky-top makes it stick to the top when scrolled to.

TL;DR

• Use .navbar + .navbar-expand-{breakpoint}.
• .navbar-dark is for dark backgrounds, .navbar-light for light.
• .navbar-brand styles the site name.
• The toggler + collapse create the mobile hamburger menu.