Creating a Navigation Bar

A navigation bar is the menu that sits at the top of most websites, and Bootstrap's navbar component is responsive by design, showing a full horizontal menu on larger screens and collapsing into a toggle button on smaller ones.

The basic structure

<nav class="navbar navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" data-bs-toggle="collapse"
            data-bs-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

How the mobile toggle works

The toggle button's data-bs-target points at the id of the collapsible section beside it. Below the navbar-expand-lg breakpoint, the link list hides completely until the button is tapped, at which point it slides open; above that breakpoint, the links simply show all the time and the button never appears.

You need Bootstrap's JavaScript

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

The collapsing behaviour depends entirely on this script being loaded, usually right before the closing body tag. Without it, the toggle button renders correctly but clicking it does nothing at all.

Dark and coloured navbars

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

navbar-dark switches the text colour to something readable against a dark background, while bg-dark supplies that dark background itself; the two are typically used together rather than one without the other.

Dropdowns inside a navbar

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">More</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option</a></li>
  </ul>
</li>

Fixed and sticky positioning

Adding fixed-top keeps the navbar pinned to the very top of the viewport even while the page scrolls, always overlapping the content beneath it. sticky-top behaves similarly but only takes effect once the user scrolls past where the navbar would normally sit, which usually feels less abrupt on a long page.

Highlighting the current page

Adding the active class to the current page's nav-link, usually set based on which route the server is rendering, gives visitors a clear visual cue of where they currently are within the site.