SyntaxStudy
Sign Up
Bootstrap Bootstrap Navbar with Dropdowns
Bootstrap Intermediate 6 min read

Bootstrap Navbar with Dropdowns

Bootstrap Navbar Dropdowns

Navbars can contain dropdown menus — subnavigation that appears on click. Use the Bootstrap Dropdown component inside a .nav-item with .dropdown class and trigger the menu with data-bs-toggle="dropdown".

Mega Menus

For complex navigation, you can build a mega menu by using a wider dropdown container and Bootstrap grid classes inside the dropdown menu. This requires some custom CSS to override the default max-width.

Example
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <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="#">Web Apps</a></li>
            <li><a class="dropdown-item" href="#">Mobile</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">All Products</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
Pro Tip

Use <hr class="dropdown-divider"> to separate groups of related menu items — much cleaner than spacing dividers.