Navbar Component

Learn to build a responsive Bootstrap navbar with a collapsible mobile menu, .navbar-toggler, brand, nav links, and color schemes.

Introduction

The navbar is usually the very first component visitors interact with, and it needs to work equally well as a wide horizontal bar on desktop and a collapsible hamburger menu on mobile. Bootstrap's `.navbar` component handles both cases out of the box, using its bundled JavaScript to power the mobile collapse behavior.

What You Will Learn

The core .navbar structure and its building blocks.
How the collapsible mobile menu and hamburger toggle work.
Responsive breakpoints that control when the navbar collapses.
Color schemes and fixed/sticky positioning.

A navbar starts with a `<nav>` element carrying the `.navbar` class. Inside, a `.container` (or `.container-fluid`) constrains the content width, matching the rest of your page layout.

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">PrograMinds</a>
  </div>
</nav>

What Renders

Click Run to see what this code prints.

Navigation links live inside a `<ul class="navbar-nav">`, with each item wrapped in `.nav-item` and each link carrying `.nav-link`. `.me-auto` on the `<ul>` pushes any content after it to the right edge of the navbar.

<ul class="navbar-nav me-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="#">Courses</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>

What Renders

Click Run to see what this code prints.

Wrap the navigation content in a `<div class="collapse navbar-collapse">` and add a `.navbar-toggler` button before it. The button's `data-bs-toggle="collapse"` and `data-bs-target` attributes link it to the collapse element by id, so Bootstrap's JavaScript can show/hide it on click.

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

What Renders

Click Run to see what this code prints.

The `.navbar-expand-{breakpoint}` class controls at which screen width the navbar switches from collapsed (mobile) to expanded (horizontal) mode. Choose the breakpoint based on how much content your links take up.

Class	Expands (shows links inline) at
.navbar-expand-sm	≥576px
.navbar-expand-md	≥768px
.navbar-expand-lg	≥992px
.navbar-expand-xl	≥1200px
.navbar (no expand class)	Never — always collapsed

What Renders

Click Run to see what this code prints.

Add `data-bs-theme="dark"` to the navbar to switch its text/icon colors for a dark background, then pair it with a background utility like `.bg-dark` or `.bg-primary`.

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container">
    <a class="navbar-brand" href="#">PrograMinds</a>
  </div>
</nav>

What Renders

Click Run to see what this code prints.

A `.nav-item` can contain a full dropdown (covered in detail in the Dropdowns lesson) to group related links, such as a "Courses" menu that expands into subcategories.

<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="#">Bootstrap</a></li>
    <li><a class="dropdown-item" href="#">JavaScript</a></li>
  </ul>
</li>

What Renders

Click Run to see what this code prints.

Add `.fixed-top` to pin the navbar to the top of the viewport permanently (it will overlap page content unless you add top padding to the body). `.sticky-top` instead keeps the navbar in normal flow until the user scrolls past it, then sticks it to the top.

<nav class="navbar navbar-expand-lg bg-light sticky-top">
  <div class="container">
    <a class="navbar-brand" href="#">PrograMinds</a>
  </div>
</nav>

What Renders

Click Run to see what this code prints.

Common Mistakes

Avoid These Mistakes

Mismatched data-bs-target and id between the toggler button and the collapse div, so clicking does nothing.
Forgetting .navbar-expand-{breakpoint}, leaving the navbar permanently collapsed even on desktop.
Using .fixed-top without adding top padding to the body, causing the navbar to overlap page content.
Missing aria-label on the toggler button, hurting screen reader accessibility.

Best Practices

Choose the expand breakpoint based on how many nav links you have, not just a default.
Use data-bs-theme="dark" instead of manually overriding text colors on a dark navbar.
Keep the mobile menu short — long dropdown-filled navbars are hard to use on small screens.
Always include aria-controls, aria-expanded, and aria-label on the toggler button.
Use .sticky-top over .fixed-top when you want the navbar to only appear once scrolling begins.

Frequently Asked Questions

Do I need to load Bootstrap's JavaScript for the mobile menu to work?

Yes, the collapse behavior is powered by Bootstrap's JS bundle. Without it, clicking the toggler button will do nothing.

Can I have more than one navbar on a page?

Yes, but each collapse toggler and target pair must have unique ids so they don't conflict with each other.

How do I center the nav links instead of left/right aligning them?

Wrap the <ul> in a flex container and apply justify-content-center, or use mx-auto on the <ul> itself.

What is the difference between .fixed-top and .sticky-top?

.fixed-top removes the navbar from normal document flow and pins it immediately; .sticky-top stays in flow and only sticks once the page scrolls to its position.

Key Takeaways

A navbar needs .navbar plus a .navbar-expand-{breakpoint} class to collapse responsively.
.navbar-toggler and .collapse.navbar-collapse are linked via matching data-bs-target and id.
navbar-nav, nav-item, and nav-link structure the actual links.
data-bs-theme="dark" adjusts text/icon colors for dark backgrounds.
Dropdowns and other components nest naturally inside .nav-item.
.fixed-top and .sticky-top control how the navbar behaves during scroll.

Summary

The navbar ties together everything you've learned so far — flexbox alignment, spacing, buttons, and responsive breakpoints — into one polished, mobile-friendly component. Next, you'll learn cards, one of the most versatile content containers in the entire framework.

Next Lesson →

Cards