Navbar, Dropdowns, and Offcanvas

1. Course Introduction

(1) Prerequisites

Master the 12-column grid system and responsive column usage (from Lesson 7)
Familiar with offset-* and gutter control

(2) 🎯 What You'll Learn

Master the basic structure of the navbar (navbar > container > navbar-nav)
Learn to implement responsive collapse using navbar-expand-*
Master the usage of the Dropdown component
Master the configuration and directional control of the Offcanvas component
Be able to independently create a complete responsive navbar for a corporate website

(3) Pain Points

Bob's company website needs to display a full horizontal navigation on desktop and collapse into a hamburger menu on mobile. Implementing a responsive navbar with pure HTML/CSS/JS requires a lot of code to handle layout, events, and breakpoints.

(4) Solution

Using Bootstrap's navbar-expand-* plus a hamburger button, it can be achieved in about 10 lines of code. Bootstrap's navbar component integrates responsive collapse, dropdowns, and off-canvas panels, allowing a single codebase to adapt to mobile and desktop.

(5) Benefits

Using Bootstrap's navbar, Bob completed the entire responsive navigation with just a few lines of code—it expands horizontally on desktop and collapses into a hamburger menu on mobile, with built-in dropdown support.

HTML

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <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="#">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      </ul>
    </div>
  </div>
</nav>

▶ Try it Yourself

(1) Key Components

Component	Class	Purpose
Navbar Container	`navbar`	Declares the navbar and provides flex layout
Expand Breakpoint	`navbar-expand-lg`	Expands horizontally at `lg` and above, collapses below
Brand	`navbar-brand`	Logo / Site name
Hamburger Button	`navbar-toggler`	Displays on mobile, triggers collapse on click
Collapsible Panel	`collapse navbar-collapse`	The menu panel controlled by the hamburger button
Navigation List	`navbar-nav`	Navigation link list (flex)
Link Item	`nav-item` / `nav-link`	A single navigation link

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Alice's Site</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navDark">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navDark">
        <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="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg bg-primary navbar-dark mt-2">
    <div class="container">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLight">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navLight">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>Resize the browser to see the navbar collapse on smaller screens.</p>
  </div>

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

▶ Try it Yourself

HTML

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="https://via.placeholder.com/30x30" alt="Logo" class="d-inline-block align-text-top me-2">
      Bootstrap
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navExt">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navExt">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
      </ul>
      <form class="d-flex mx-2" role="search">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
      <a href="#" class="btn btn-success">Sign Up</a>
    </div>
  </div>
</nav>

▶ Try it Yourself

4. Dropdowns

HTML

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    Dropdown
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</li>

▶ Try it Yourself

Element	Class	Description
Trigger	`dropdown-toggle`	A dropdown button with an arrow indicator
Menu Container	`dropdown-menu`	The dropdown panel
Menu Item	`dropdown-item`	A single option
Divider	`dropdown-divider`	Separates menu groups
Disabled Item	`dropdown-item disabled`	Greyed out and non-clickable

HTML

<div class="btn-group dropup">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Dropup</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
  </ul>
</div>

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Account</h6></li>
  <li><a class="dropdown-item" href="#">Profile</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><h6 class="dropdown-header">Help</h6></li>
  <li><a class="dropdown-item" href="#">FAQ</a></li>
</ul>

▶ Try it Yourself

5. Offcanvas Component

HTML

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Offcanvas Nav</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="offcanvasNav">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title text-white">Menu</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">More</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">About</a></li>
              <li><a class="dropdown-item" href="#">Contact</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

▶ Try it Yourself

Comparison Dimension	`collapse navbar-collapse`	`offcanvas`
Animation Direction	Vertical expand/collapse	Slides in from the side
Backdrop	None	Yes (semi-transparent background)
Use Case	Simple links (3-5 items)	Multi-level menus + Search + User panels

(2) Offcanvas Directions

Class	Direction	Scenario
`offcanvas-start`	Slides out from the left	Sidebar navigation
`offcanvas-end`	Slides out from the right	Shopping cart, notifications (default)
`offcanvas-top`	Slides out from the top	Search panel
`offcanvas-bottom`	Slides out from the bottom	Mobile filtering

graph TD
    subgraph navbar
        A[.navbar] --> B[.container]
        B --> C[.navbar-brand Brand Identifier]
        B --> D[.navbar-toggler Hamburger Button]
        B --> E[.collapse .navbar-collapse Collapsible Panel]
        E --> F[.navbar-nav Navigation List]
        F --> G[.nav-item Link Item]
        G --> H[.nav-link Link]
        G --> I[.dropdown Dropdown Menu]
        I --> J[.dropdown-menu]
        J --> K[.dropdown-item]
        E --> L[Search Form / Buttons etc.]
    end
    subgraph Coloring
        A --> M[bg-* Background Color]
        A --> N[navbar-dark / navbar-light Text Color]
    end
    subgraph Positioning
        A --> O[fixed-top / fixed-bottom / sticky-top]
    end

navbar-expand value	Collapse Behavior	Horizontal Expansion Screen	Typical Scenario
Not specified	Always collapses	None	Mobile-only navigation
`navbar-expand-sm`	Collapses <576px	>=576px	Large mobile phones+
`navbar-expand-md`	Collapses <768px	>=768px	Tablets+
`navbar-expand-lg`	Collapses <992px	>=992px	Desktop+ (Most common)
`navbar-expand-xl`	Collapses <1200px	>=1200px	Large desktop
`navbar-expand-xxl`	Collapses <1400px	>=1400px	Extra-large screens

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Top Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { padding-top: 56px; }
    .scroll-content { height: 1500px; background: linear-gradient(#f8f9fa, #e9ecef); }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Top Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navFixed">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navFixed">
        <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="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container scroll-content d-flex justify-content-center align-items-center">
    <p class="text-muted">fixed-top fixes the navbar to the top of the viewport; it remains visible when scrolling.</p>
  </div>

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

▶ Try it Yourself

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar with Search</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">MyApp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navSearch">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navSearch">
        <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="#">Explore</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Favorites</a></li>
        </ul>
        <form class="d-flex me-2" role="search">
          <input class="form-control me-2" type="search" placeholder="Search..." aria-label="Search">
          <button class="btn btn-outline-primary" type="submit">Search</button>
        </form>
        <a href="#" class="btn btn-primary">Log In</a>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>The navbar includes a search box and a login button; all are collapsed into the hamburger menu when collapsed.</p>
  </div>

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

▶ Try it Yourself

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mega Dropdown</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .mega-menu { min-width: 400px; padding: 1rem; }
    @media (max-width: 991.98px) { .mega-menu { min-width: auto; } }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Mega Shop</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMega">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMega">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Product Categories</a>
            <div class="dropdown-menu mega-menu p-4">
              <div class="row g-3">
                <div class="col-6">
                  <h6 class="dropdown-header">Electronics</h6>
                  <a class="dropdown-item" href="#">Phones</a>
                  <a class="dropdown-item" href="#">Computers</a>
                  <a class="dropdown-item" href="#">Headphones</a>
                  <a class="dropdown-item" href="#">Accessories</a>
                </div>
                <div class="col-6">
                  <h6 class="dropdown-header">Home & Living</h6>
                  <a class="dropdown-item" href="#">Furniture</a>
                  <a class="dropdown-item" href="#">Kitchenware</a>
                  <a class="dropdown-item" href="#">Textiles</a>
                  <a class="dropdown-item" href="#">Storage</a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">New Arrivals</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Promotions</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>Mega Menu uses `dropdown-menu` + an internal Grid to create a multi-column layout, suitable for navigation with many categories.</p>
  </div>

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

▶ Try it Yourself

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transparent Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background: rgba(0,0,0,0.3); backdrop-filter: blur(4px);">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navTrans">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navTrans">
        <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="#">Works</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="d-flex justify-content-center align-items-center text-white" style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="text-center">
      <h1 class="display-3 fw-bold">Creative Design Studio</h1>
      <p class="lead">We tell brand stories through design</p>
      <a href="#" class="btn btn-light btn-lg mt-3">Learn More</a>
    </div>
  </div>

  <div class="container py-5">
    <p>The transparent navbar overlays the Hero background, overlapping with content when scrolling. `backdrop-filter: blur(4px)` enhances readability.</p>
  </div>

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

▶ Try it Yourself

❓ Frequently Asked Questions

Q navbar-expand-lg collapses below lg, but I want it to collapse earlier below md. What should I do?

A Simply change the breakpoint to a smaller one: navbar-expand-md means it expands horizontally at md and above, and collapses below md. Available values: sm / md / lg / xl / xxl. If you omit navbar-expand-*, it will always be collapsed.

Q Why can't I click the navbar dropdown on mobile?

A Ensure the dropdown trigger is an <a> or <button> tag containing data-bs-toggle="dropdown", and that the Bootstrap JS bundle is included at the bottom of the page.

Q What's the difference between Offcanvas and Modal?

A Offcanvas is a side-sliding panel that doesn't block the main content area (still visible on desktop), suitable for navigation/filtering. Modal is a centered popup that completely blocks the background, suitable for confirmation dialogs/form filling.

Q Can the navbar be fixed to the top?

A Yes. Add the fixed-top class to fix it to the top of the viewport; you'll then need to add padding-top to the body to compensate for the height. There's also the sticky-top option: it scrolls normally and only fixes when it scrolls out of the viewport.

Q What should I pay attention to regarding navbar Accessibility (A11y)?

A Key points: (1) Use a <nav> tag with an aria-label describing the navigation's purpose; (2) Use aria-controls on the hamburger button pointing to the collapsible panel's ID; (3) Add aria-current="page" to the link for the current page; (4) Use the aria-expanded state on the dropdown trigger. Bootstrap's JS components automatically handle most ARIA attributes.

📖 Summary

Navbar structure: navbar > container > navbar-brand + navbar-toggler + collapse navbar-collapse
navbar-expand-{breakpoint} controls the collapse breakpoint; bg-* + navbar-{light/dark} controls the color scheme
Use the dropdown component for dropdowns; dropdown-toggle + data-bs-toggle="dropdown" implements the toggle
The Offcanvas component provides a better mobile navigation experience

📝 Assignment

⭐ Create a complete corporate website navbar: dark background, brand logo on the left, menu links on the right (Home / About / Services / Contact), with Services containing a dropdown submenu.
⭐⭐ Change the navbar's collapse method to Offcanvas (slides out from the side). Add a search box and a user login button inside the Offcanvas panel.
⭐⭐⭐ Create a bottom toolbar: use fixed-bottom for fixed positioning, containing 4 icon links, simulating a mobile app's bottom navigation.

Previous Lesson: Grid · Next Lesson: Buttons & Button Groups

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

404 Not Found

Navbar, Dropdowns, and Offcanvas

1. Course Introduction

(1) Prerequisites

(2) 🎯 What You'll Learn

(3) Pain Points

(4) Solution

(5) Benefits

2. Basic Navbar Structure

(1) Key Components

▶ Example: Themed Navbar

3. Enhanced Navbar Content

4. Dropdowns

5. Offcanvas Component

(1) Offcanvas vs. Collapsible Navigation

(2) Offcanvas Directions

6. Navbar Component Diagram & Reference

(1) Navbar Component Hierarchy

(2) Navbar Breakpoint Behavior Reference

▶ Example: Fixed Top Navbar

▶ Example: Navbar with Search and Buttons

▶ Example: Transparent Navbar over Hero

❓ Frequently Asked Questions

📖 Summary

📝 Assignment

404 Not Found

Navbar, Dropdowns, and Offcanvas

1. Course Introduction

(1) Prerequisites

(2) 🎯 What You'll Learn

(3) Pain Points

(4) Solution

(5) Benefits

2. Basic Navbar Structure

(1) Key Components

▶ Example: Themed Navbar

3. Enhanced Navbar Content

4. Dropdowns

(1) Dropdown Variations

5. Offcanvas Component

(1) Offcanvas vs. Collapsible Navigation

(2) Offcanvas Directions

6. Navbar Component Diagram & Reference

(1) Navbar Component Hierarchy

(2) Navbar Breakpoint Behavior Reference

▶ Example: Fixed Top Navbar

▶ Example: Navbar with Search and Buttons

▶ Example: Mega Menu Dropdown

▶ Example: Transparent Navbar over Hero

❓ Frequently Asked Questions

📖 Summary

📝 Assignment

🙏 帮我们做得更好