Navbar

The navbar is Bootstrap 5's responsive navigation header. It collapses into a hamburger menu on small screens and expands into a horizontal bar on larger ones, and — like every other interactive component in Bootstrap 5 — it needs zero jQuery. The collapse/expand behavior is wired up purely with data-bs-* attributes that Bootstrap's own vanilla-JS bundle reads. We'll build a full TrailMap navbar in this lesson: brand logo, nav links, and a working hamburger toggle for mobile.

1. The .navbar Basics

Every navbar starts with the .navbar class on a <nav> element, plus a background/theme utility. Inside it, a .container or .container-fluid controls how much horizontal padding the content gets, and .navbar-brand marks the logo/site name.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">TrailMap</a>
  </div>
</nav>

2. Responsive Collapse With .navbar-expand-{breakpoint}

Add .navbar-expand-sm, .navbar-expand-md, .navbar-expand-lg, .navbar-expand-xl, or .navbar-expand-xxl to control the breakpoint at which the navbar switches from a collapsed hamburger menu to a full horizontal bar. Below that breakpoint, the nav links are hidden inside a collapsible panel; at and above it, they display inline automatically — no manual show/hide logic needed on your part.

<!-- Collapses below the "lg" breakpoint (992px), expands at and above it -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  ...
</nav>

3. The Toggler Button — No jQuery Required

The hamburger button uses .navbar-toggler plus two data-bs-* attributes: data-bs-toggle="collapse" tells Bootstrap's JS what behavior to attach, and data-bs-target (or aria-controls) points at the id of the collapsible panel it controls. The little three-bar icon inside is .navbar-toggler-icon — pure CSS background image, no font icon library needed.

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

4. .navbar-nav, .nav-item, .nav-link

The links themselves live inside a collapsible wrapper (.collapse.navbar-collapse) whose id matches the toggler's data-bs-target. Inside that, .navbar-nav is the list, each entry is a .nav-item, and the clickable link itself is .nav-link. The current page gets an extra .active class (with aria-current="page" for screen readers).

<div class="collapse navbar-collapse" id="trailmapNav">
  <ul class="navbar-nav ms-auto">
    <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="#">Browse Trails</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Submit a Trail</a>
    </li>
  </ul>
</div>

.ms-auto (margin-start auto, a flex/spacing utility) is what pushes the nav links to the right side of the bar — the navbar is a flex container by default.

5. Light vs Dark Navbars

Text/icon color inside a navbar is controlled independently from the background. Use .navbar-light when the background is pale (pairs with a dark-text palette) or .navbar-dark when the background is deep-colored (pairs with a light-text palette), then pick the actual background color with a utility like .bg-light, .bg-dark, or .bg-primary.

<!-- Light navbar: dark text on a pale background -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">...</nav>

<!-- Dark navbar: light text on a deep background -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">...</nav>

<!-- Dark navbar with a brand color background -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">...</nav>

6. Full Worked Example — TrailMap Responsive Navbar

Putting it all together: a dark TrailMap navbar with a brand link, a collapsible link list that stacks below the lg breakpoint, and a working hamburger toggler for mobile.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">🏔 TrailMap</a>

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

    <div class="collapse navbar-collapse" id="trailmapNav">
      <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="#">Browse Trails</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Submit a Trail</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Below 992px, this navbar shows only the brand and the hamburger icon; tapping the icon slides the #trailmapNav panel open with the four links stacked vertically. At 992px and above, the panel is always visible and the links line up horizontally, pushed to the right by .ms-auto.