Navbars and Navigation

Almost every website needs a header with a brand, links, and a menu that collapses on phones. The Bootstrap navbar handles all of that with markup and data attributes alone. In this lesson you will build a responsive navbar step by step, understand how the collapse mechanism works, and learn the nav, tab and breadcrumb components used elsewhere on a page.

Navbar Anatomy

A navbar has four essential parts: the wrapper, a brand, a toggler for small screens, and a collapsible region holding the links.

html

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">CodeYourCraft</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="#">Tutorials</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      </ul>
    </div>
  </div>
</nav>

The key class is navbar-expand-lg: below the lg breakpoint the links hide behind the hamburger toggler; from lg upward they display inline. Swap the infix (-sm, -md, -xl) to change where the switch happens. The data-bs-toggle="collapse" attribute wires the toggler to the region whose id matches data-bs-target, so no custom JavaScript is required as long as the Bootstrap bundle is loaded.

Color Schemes and Placement

Set data-bs-theme="dark" on the navbar (or use a dark background like bg-dark) to flip link colors for dark headers. Placement helpers include fixed-top, which pins the navbar to the viewport (remember to add top padding to the body so content is not hidden), and sticky-top, which keeps it visible after scrolling past it.

Dropdowns Inside Navbars

Nav items can host dropdown menus:

html

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button"
     data-bs-toggle="dropdown" aria-expanded="false">Courses</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">HTML</a></li>
    <li><a class="dropdown-item" href="#">CSS</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Bootstrap</a></li>
  </ul>
</li>

Navs and Tabs Beyond the Header

The lighter .nav component powers tabs and pills anywhere on the page. Add nav-tabs or nav-pills for styling, and pair with data-bs-toggle="tab" plus .tab-content panes to switch content without page loads:

html

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#one">Overview</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#two">Reviews</a></li>
</ul>
<div class="tab-content pt-3">
  <div class="tab-pane fade show active" id="one">Overview content</div>
  <div class="tab-pane fade" id="two">Reviews content</div>
</div>

Breadcrumbs

Breadcrumbs show the current location in a hierarchy and are good for SEO-friendly internal linking:

html

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
  </ol>
</nav>

Key Takeaways

navbar-expand-{breakpoint} decides where the menu collapses into a hamburger.
The toggler works through data-bs-toggle="collapse" and a matching target id.
Use fixed-top or sticky-top for persistent headers; dark themes via data-bs-theme.
.nav with tabs or pills plus tab-content builds in-page tabbed interfaces.

Next lesson: Cards, the flexible container behind most modern page sections.