Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.

Default

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

Multilevel

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#!">Menu item 1</a></li>
    <li class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#!">Menu item 2</a>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#!">Submenu item 1</a></li>
        <li><a class="dropdown-item" href="#!">Submenu item 2</a></li>
      </ul>
    </li>
  </ul>
</div>