BootstrapHow-ToBeginner · 3 min read

How to Add Dropdown in Navbar Bootstrap: Simple Guide

To add a dropdown in a Bootstrap navbar, use a nav-item dropdown with a dropdown-toggle link and a dropdown-menu list inside the navbar. Bootstrap's JavaScript handles the toggle behavior automatically when you include the required classes and data attributes.

📐

Syntax

Here is the basic structure to add a dropdown inside a Bootstrap navbar:

nav-item dropdown: Wraps the dropdown menu item.
dropdown-toggle: The clickable link that toggles the dropdown.
dropdown-menu: The container for dropdown links.
data-bs-toggle="dropdown": Attribute to enable dropdown toggle behavior.

html

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    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><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</li>

💻

Example

This example shows a complete responsive navbar with a dropdown menu using Bootstrap 5. The dropdown toggles when clicked, showing menu items.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Navbar Dropdown Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              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><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

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

Output

A light-colored navbar with brand name on left, a Home link, and a Dropdown menu that expands on click showing three clickable items.

⚠️

Common Pitfalls

Common mistakes when adding dropdowns in Bootstrap navbar include:

Forgetting to include Bootstrap's JavaScript bundle, so dropdowns won't toggle.
Missing data-bs-toggle="dropdown" attribute on the toggle link.
Not using the correct classes like dropdown-toggle and dropdown-menu.
Placing dropdown markup outside the navbar-nav list.

html

<!-- Wrong: Missing data-bs-toggle attribute -->
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">
    Dropdown
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</li>

<!-- Right: Includes data-bs-toggle attribute -->
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</li>

📊

Quick Reference

Remember these key points when adding dropdowns in Bootstrap navbar:

Use nav-item dropdown on the list item.
Add dropdown-toggle class and data-bs-toggle="dropdown" on the toggle link.
Wrap dropdown links inside dropdown-menu.
Include Bootstrap's JS bundle for functionality.

✅

Key Takeaways

Add dropdown inside navbar using nav-item dropdown and dropdown-toggle with data-bs-toggle="dropdown".

Always include Bootstrap's JavaScript bundle for dropdown toggle to work.

Wrap dropdown links inside a dropdown-menu container.

Use correct Bootstrap classes and structure inside navbar-nav.

Test dropdown on different screen sizes to ensure responsiveness.