Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup
to the parent.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right
to a .dropdown-menu
to right align the dropdown menu.
Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow
properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
.pull-right
alignmentAs of v3.1.0, we've deprecated .pull-right
on dropdown menus. To right-align a menu, use .dropdown-menu-right
. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left
.
Add a header to label sections of actions in any dropdown menu.
Add a divider to separate series of links in a dropdown menu.
Add .disabled
to a <li>
in the dropdown to disable the link.