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>
Dropdowns
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="https://vigilanteinformativo.com/wordpress/?p=264"
.
- <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.