What Is a Bootstrap Dropdown?

A dropdown is a small menu that opens when someone activates a button or link. Dropdowns help organize related options without taking up too much space.

You might see them in account menus, website navigation, settings panels, or action menus. Bootstrap gives you ready-made dropdown styling and JavaScript behavior.

Build Your First Dropdown

A basic Bootstrap dropdown needs three main pieces: a dropdown wrapper, a toggle button, and a menu containing clickable items.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle"
    type="button"
    data-bs-toggle="dropdown"
    aria-expanded="false">
    My Menu
  </button>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#profile">
      Profile
    </a></li>
    <li><a class="dropdown-item" href="#settings">
      Settings
    </a></li>
  </ul>
</div>

Each dropdown-item styles an option inside the menu. Use links for navigation and buttons for actions that don’t navigate to another page.

Add Headers and Dividers

Larger menus can be easier to understand when related items are grouped together. Bootstrap includes headers and dividers for organizing the menu.

<ul class="dropdown-menu">
  <li>
    <h6 class="dropdown-header">Account</h6>
  </li>
  <li>
    <a class="dropdown-item" href="#profile">Profile</a>
  </li>
  <li>
    <a class="dropdown-item" href="#settings">Settings</a>
  </li>
  <li><hr class="dropdown-divider"></li>
  <li>
    <button class="dropdown-item" type="button">
      Sign Out
    </button>
  </li>
</ul>

Customize Your Dropdown Button

The dropdown toggle is still a Bootstrap button, so everything you learned in Lesson 01 applies here. Change the button color using classes like btn-success, btn-dark, or btn-outline-primary.

<button
  class="btn btn-success dropdown-toggle"
  type="button"
  data-bs-toggle="dropdown"
  aria-expanded="false">
  Choose an Option
</button>

You can also use btn-sm or btn-lg to change the toggle’s size. The menu itself continues to use dropdown-menu.

Control Where the Menu Opens

By default, dropdown menus align with the start edge of their toggle. Bootstrap lets you align the menu to the end edge instead.

<ul class="dropdown-menu dropdown-menu-end">
  <li>
    <a class="dropdown-item" href="#one">Option One</a>
  </li>
</ul>

The dropdown-menu-end class is useful for account menus near the right side of a header, where a start-aligned menu might extend beyond the screen.

Drop Up, Start, or End

Not every menu needs to open downward. Bootstrap provides directional wrapper classes for different layouts.

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle"
    type="button"
    data-bs-toggle="dropdown"
    aria-expanded="false">
    Open Upward
  </button>

  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item" href="#option">Option</a>
    </li>
  </ul>
</div>

For directional dropdowns, make sure there’s enough available space for the menu to appear comfortably.

Disabled Items and Keyboard Access

Sometimes a menu option isn’t available. Bootstrap includes the disabled class to style unavailable menu items.

<ul class="dropdown-menu">
  <li>
    <a class="dropdown-item" href="#profile">Profile</a>
  </li>
  <li>
    <span class="dropdown-item disabled"
      aria-disabled="true">Coming Soon</span>
  </li>
</ul>

Bootstrap dropdowns support keyboard interaction. Users can open the menu, move through items using arrow keys, and close it with Escape.