Basic Dropdown

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.


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.
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.

Disabled Menu Items

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

Active Menu Items

Add .active to a <a> in the dropdown to disable the link.

Icons Menu Items

Label-pills In Menu Items


Animated dropdown item by adding .animate and adding custom animate class to dropdown item.

Split Button Dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

Dropup Variation

Trigger dropdown menus above elements by adding .dropup to the parent.

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 div in an existing dropdown menu for automatic styling.