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>
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>
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.
- <div class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- </ul>
- </div>
To keep URLs intact, use the data-target attribute instead of href="#".
- <div class="dropdown">
- <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
- Dropdown
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- </ul>
- </div>
Via JavaScript
Call the dropdowns via JavaScript:
- $('.dropdown-toggle').dropdown()
Options
None
Methods
$().dropdown()
A programatic api for activating menus for a given navbar or tabbed navigation.
