CHAPTER 11 Beginner

Bootstrap Navbar and Navigation

Updated: May 18, 2026

5 min read

# CHAPTER 11

1. Chapter Introduction

The navbar is the first component users interact with on any website. Bootstrap's navbar component handles everything: brand logo, navigation links, a search bar, dropdown menus, and most importantly — automatic collapse to a hamburger menu on mobile screens.

2. Learning Objectives

Build a responsive navbar that collapses on mobile.

Add brand, links, and a toggler.

Create dropdown menus in the navbar.

Implement breadcrumbs and pagination.

Build a complete responsive navigation system.

html

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

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

    <!-- Brand / Logo -->
    <a class="navbar-brand fw-bold" href="#">
      ⚡ MyBrand
    </a>

    <!-- Mobile hamburger toggler -->
    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible nav content -->
    <div class="collapse navbar-collapse" id="mainNav">
      <!-- Nav links -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>

        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            Products
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Laptops</a></li>
            <li><a class="dropdown-item" href="#">Phones</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#">All Products</a></li>
          </ul>
        </li>
      </ul>

      <!-- Right side: search + button -->
      <form class="d-flex gap-2" role="search">
        <input class="form-control" type="search" placeholder="Search..." />
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

html

12345678910111213141516

<!-- Dark navbar with dark background -->
<nav class="navbar navbar-dark bg-dark">...</nav>

<!-- Light navbar with light background -->
<nav class="navbar navbar-light bg-light">...</nav>

<!-- Colorful backgrounds -->
<nav class="navbar navbar-dark bg-primary">...</nav>
<nav class="navbar navbar-dark bg-success">...</nav>
<nav class="navbar navbar-dark bg-danger">...</nav>

<!-- Custom color using CSS -->
<nav class="navbar navbar-dark" style="background-color: #6f42c1;">...</nav>

<!-- Transparent navbar (for hero sections) -->
<nav class="navbar navbar-dark position-absolute top-0 w-100" style="background:transparent;">...</nav>

5. Fixed Navbars

html

12345678910

<!-- Fixed to top — stays visible when scrolling -->
<nav class="navbar navbar-dark bg-dark fixed-top">...</nav>
<!-- Add padding to body to prevent content going under fixed navbar -->
<body style="padding-top: 70px;">

<!-- Fixed to bottom -->
<nav class="navbar navbar-dark bg-dark fixed-bottom">...</nav>

<!-- Sticky — sticks to top when it reaches the viewport edge -->
<nav class="navbar navbar-dark bg-primary sticky-top">...</nav>

html

1234567891011121314151617181920212223242526272829

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Dashboard</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#dashNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="dashNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">📊 Analytics</a></li>
        <li class="nav-item"><a class="nav-link" href="#">👥 Users</a></li>
        <li class="nav-item"><a class="nav-link" href="#">⚙️ Settings</a></li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle d-flex align-items-center gap-2" href="#" data-bs-toggle="dropdown">
            <img src="https://picsum.photos/seed/user/32/32" class="rounded-circle" width="32" height="32" alt="User" />
            John Doe
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">👤 Profile</a></li>
            <li><a class="dropdown-item" href="#">⚙️ Settings</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item text-danger" href="#">🚪 Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

7. Breadcrumbs

html

123456789101112131415

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item"><a href="#">Electronics</a></li>
    <li class="breadcrumb-item active">MacBook Pro</li>
  </ol>
</nav>

<!-- Custom divider (using CSS) -->
<style>
  .breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before {
    content: "→";
  }
</style>

8. Pagination

html

1234567891011121314151617

<!-- Basic pagination -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

<!-- Centered pagination -->
<nav><ul class="pagination justify-content-center">...</ul></nav>

<!-- Large pagination -->
<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>

9. Common Mistakes

Wrong data-bs-target value: The data-bs-target="#mainNav" on the toggler must exactly match the id="mainNav" on the collapse div (including the #).

Missing Bootstrap JS for mobile toggle: The hamburger button requires Bootstrap JS (bootstrap.bundle.min.js). Without it, clicking the toggler does nothing.

10. MCQs

Question 1

What class makes the navbar collapse on mobile?

Question 2

What element creates the hamburger button?

Question 3

What keeps navbar visible while scrolling?

Question 4

What class aligns dropdown to the right?

Question 5

Dropdown trigger uses what attribute?

Question 6

`me-auto` on `<ul class="navbar-nav">` does?

Question 7

Breadcrumb list uses which HTML element?

Question 8

Active pagination item?

Question 9

What class creates a divider inside a dropdown?

Question 10

`navbar-expand-lg` means the navbar collapses below?

11. Interview Questions

Q: Explain how Bootstrap's responsive navbar collapse works (the mobile hamburger pattern).

Q: How do you right-align the user profile dropdown in a navbar?

12. Summary

Bootstrap's navbar component is fully responsive by design — it expands to full navigation on desktop and collapses to a hamburger on mobile through pure HTML data attributes and Bootstrap JS. The navbar-expand-{breakpoint} class controls the collapse point. Dropdowns, search forms, and user avatars all integrate seamlessly.

13. Next Chapter Recommendation

In Chapter 12: Bootstrap Alerts and Badges, we learn to show feedback messages, status indicators, and notification counters using alerts, badges, and toasts.

Browse All 21+ Subject Areas

Quick Links

Visual Algorithm Labs

Frontend Dev

The Future of Web Architecture in 2026

Practice Quizzes