The Navbar Component

A navbar is one of the more involved Bootstrap components because it has to solve a real responsive-design problem: a full horizontal menu works fine on desktop, but needs to collapse into a hamburger menu on a phone. Bootstrap's .navbar handles that transition without you writing a single media query.

Basic structure

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">DevLearnHub</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">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Courses</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Reading it piece by piece:

• .navbar-expand-lg is the key responsive control — below the lg breakpoint, the menu collapses behind a toggle button; at lg and above, it displays as a normal horizontal row. Swap lg for md or xl depending on how much horizontal space your links actually need.
• .navbar-toggler is the hamburger button, shown only when the navbar is collapsed (Bootstrap handles that visibility for you based on the -expand-* class).
• data-bs-toggle="collapse" and data-bs-target="#mainNav" connect the button to the collapsible menu by id — clicking the button toggles the .collapse element with that id open and shut, no JavaScript written by you.
• .navbar-nav and .nav-item/.nav-link style the actual list of links, and ms-auto (margin-start: auto) pushes them to the right side of the bar.

The accessibility attributes aren't optional

aria-controls, aria-expanded, and aria-label on the toggle button are doing real work, not just following convention:

• aria-controls="mainNav" tells assistive technology which element the button expands.
• aria-expanded="false" (which Bootstrap's JS flips to "true" when open) announces the menu's current state.
• aria-label="Toggle navigation" gives the button an accessible name, since its only visible content is an icon with no text.

Leaving these out doesn't break the navbar visually — it breaks it for anyone using a screen reader, who would otherwise hear an unlabeled button with no indication of what it does or whether it's currently open.

Adding a dropdown

Navbars commonly nest a dropdown for grouped links:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">
    Resources
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Blog</a></li>
    <li><a class="dropdown-item" href="#">Documentation</a></li>
  </ul>
</li>

This follows the same data-bs-toggle pattern as the navbar's own collapse button — one of several places in Bootstrap where the same declarative wiring shows up, which the JavaScript components lesson later in this course covers in more depth.