Dropdowns

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

  1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  2.  <li><a tabindex="-1" href="#">Action</a></li>
  3.  <li><a tabindex="-1" href="#">Another action</a></li>
  4.  <li><a tabindex="-1" href="#">Something else here</a></li>
  5.  <li class="divider"></li>
  6.  <li><a tabindex="-1" href="#">Separated link</a></li>
  7. </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.

  1. <div class="dropdown">
  2.  <!-- Link or button to toggle dropdown -->
  3.  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  4.  <li><a tabindex="-1" href="#">Action</a></li>
  5.  <li><a tabindex="-1" href="#">Another action</a></li>
  6.  <li><a tabindex="-1" href="#">Something else here</a></li>
  7.  <li class="divider"></li>
  8.  <li><a tabindex="-1" href="#">Separated link</a></li>
  9.  </ul>
  10. </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.

  1. <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  2. ...
  3. </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.

  1. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  2. ...
  3.  <li class="dropdown-submenu">
  4.  <a tabindex="-1" href="#">More options</a>
  5.  <ul class="dropdown-menu">
  6. ...
  7.  </ul>
  8.  </li>
  9. </ul>

Examples

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Within a navbar

Within tabs


Usage

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

  1. <div class="dropdown">
  2.  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  3.  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  4. ...
  5.  </ul>
  6. </div>

To keep URLs intact, use the data-target attribute instead of href="#".

  1. <div class="dropdown">
  2.  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
  3. Dropdown
  4.  <b class="caret"></b>
  5.  </a>
  6.  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  7. ...
  8.  </ul>
  9. </div>

Via JavaScript

Call the dropdowns via JavaScript:

  1. $('.dropdown-toggle').dropdown()

Options

None

Methods

$().dropdown()

A programatic api for activating menus for a given navbar or tabbed navigation.