Skip to content

Bootstrap Navbar — Responsive Navigation Bar

DodaTech Updated 2026-06-28 5 min read

In this tutorial, you will learn about Bootstrap Navbar. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap navbar is a responsive navigation component that supports branding, nav links, dropdowns, search forms, and automatic mobile collapse with hamburger toggler.

What You'll Learn

You will learn how to build responsive navbars, add branding and navigation links, include dropdown menus and search forms, and customize navbar themes and placement.

Why It Matters

Navigation is the backbone of every website. DodaTech's documentation uses a fixed-top navbar with dropdown menus and a search form that collapses on mobile.

Real-World Use

Doda Browser's extension store uses a Bootstrap navbar with brand logo, category dropdowns, a search form, and user account menu that collapses on mobile devices.

flowchart LR
    A[Button Groups] --> B[Navbar]
    B --> C[Brand & Links]
    B --> D[Dropdowns]
    B --> E[Forms]
    B --> F[Responsive Collapse]
    B --> G[Placement]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Basic Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">DodaTech</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <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="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Expected output: A light-themed navbar with brand name, three nav links, and a hamburger toggler visible on small screens.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">DodaTech</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="productsDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            Products
          </a>
          <ul class="dropdown-menu" aria-labelledby="productsDropdown">
            <li><a class="dropdown-item" href="#">Doda Browser</a></li>
            <li><a class="dropdown-item" href="#">DodaZIP</a></li>
            <li><a class="dropdown-item" href="#">Durga Antivirus</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">All Products</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Expected output: A dark-themed navbar with a Products dropdown that opens on click.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">DodaTech</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSearch">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Expected output: A navbar with links on the left and a search form on the right.

<!-- Fixed top -->
<nav class="navbar fixed-top navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed Top Navbar</a>
  </div>
</nav>

<!-- Fixed bottom -->
<nav class="navbar fixed-bottom navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed Bottom Navbar</a>
  </div>
</nav>

<!-- Sticky top -->
<nav class="navbar sticky-top navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky Top Navbar</a>
  </div>
</nav>

Expected output: Fixed navbars stay at the viewport top or bottom regardless of scrolling. Sticky navbar scrolls with content then sticks.

When using fixed-top, remember to add padding-top to the body to prevent content from hiding behind the navbar.

Color Schemes

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Light</a>
  </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Dark</a>
  </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Primary</a>
  </div>
</nav>

Expected output: Three navbars in light, dark, and primary color schemes. navbar-light produces dark text, navbar-dark produces white text.

Container Options

<!-- Default container responsive padding -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Container (responsive max-width)</a>
  </div>
</nav>

<!-- Full width -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Container-fluid (full width)</a>
  </div>
</nav>

Expected output: First navbar has responsive max-width. Second spans full viewport width.

Common Mistakes

1. Missing toggler Data Attributes

The hamburger toggler needs data-bs-toggle="collapse" and data-bs-target="#navbarID" where the target matches the collapse div's id.

2. Forgetting navbar-expand-* Class

Without navbar-expand-lg (or another breakpoint), the navbar always shows the collapsed mobile view. This class tells Bootstrap when to expand.

3. Not Wrapping Content in container/container-fluid

Navbar content should be inside a container for proper alignment and padding. Without it, brand and links touch the viewport edges.

4. Fixed Navbar Overlapping Content

Fixed navbars are removed from document flow. The body needs padding-top (or bottom) equal to the navbar height (typically 56px).

In the standard navbar structure, nav links are wrapped in nav-item list items inside a navbar-nav unordered list.

Practice Questions

  1. What class makes a navbar expand at the large breakpoint? navbar-expand-lg shows the expanded navbar on large screens and collapses on smaller ones.

  2. How do you make a dark navbar with light text? Add navbar-dark bg-dark to the navbar element.

  3. What class fixes a navbar to the top of the viewport? fixed-top positions the navbar at the top of the viewport.

  4. What data attribute does the toggler use to target the collapse element? data-bs-target="#id" on the toggler button targets the collapse div by its id.

  5. How do you add a dropdown to the navbar? Add a dropdown class to the nav-item and include a dropdown-toggle link with a dropdown-menu unordered list.

Challenge

Build a complete site header with a dark navbar containing a brand logo, three main links, a Products dropdown with 4 items, a search form, and a user profile dropdown. Make it collapse at the md breakpoint.

FAQ

Can I use the navbar without a toggler?

Yes. Remove the toggler button if you do not need mobile collapse. The navbar will remain expanded at all sizes.

How do I add a logo image to the navbar?

Replace the brand text link with an tag inside the navbar-brand element. Use img-fluid or set a max-height.

Can I have multiple navbars on one page?

Yes. Use different ids for the collapse targets to avoid conflicts.

How do I align nav links to the right?

Add ms-auto class to the navbar-nav ul. For individual links, use ms-auto on the li.

Does the navbar support mega menus?

Bootstrap does not include a mega menu component, but you can create one by customizing the dropdown markup with grid layouts.

Mini Project

Build a responsive site header for a documentation website. Include a logo, section links (Getting Started, Components, Customization, API), a search form, and a version selector dropdown. Collapse at tablet breakpoint.

What's Next

Explore Navs and Tabs for tabbed navigation. Then learn Bootstrap Cards for content containers.

← Previous Bootstrap Button Groups — Grouped and Toolbar Buttons Next → Bootstrap Navs & Tabs — Tabbed and Pill Navigation

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap