Dropdown menus

Example

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

Markup

Looking at just the dropdown menu, here’s the required HTML. You need to wrap the dropdown’s trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Options

Align menus to the right and add include additional levels of dropdowns.

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Regular link</a></li>
  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
  <li><a tabindex="-1" href="#">Another link</a></li>
</ul>

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>