Bootstrap 3 Dropdowns
Here's an example of a Bootstrap dropdown:
Explanation of Code
Creating the Dropdown
Here are the key steps for creating a Bootstrap dropdown:
- Wrap the dropdown trigger element within an element with Bootstrap's
.dropdownclass, or another element that uses
- Add Bootstrap's
.dropdown-toggleclass and add
data-toggle="dropdown"to the trigger element (i.e. the element that users click on to expand the dropdown). In the above example, the trigger is a
- Use the
<ul>element with a class of
.dropdown-menuto build the actual dropdown menu.
In the above example we also add a small down triangle (caret) to indicate that it is a dropdown. We add this by using Bootstrap's
.caret class applied to a
About the ARIA Attributes
You might also notice that the above example has some ARIA attributes. These have been added for accessibility purposes. Here's an explanation of the ARIA attributes used with the above dropdown.
- Indicates that the element has a popup context menu or sub-level menu. Its value can be either
true(the element has a popup) or
false(the element does not have a popup).
- Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. Possible values are
false, and undefined (default).
- Identifies the element (or elements) that labels the current element. It provides the user with a recognizable name of the object.
You can reverse the dropdown so that it becomes a "dropup" menu:
You might have noticed that Bootstrap automatically reverses the caret when using a dropup, indicating to the user that the list will appear above the button.
You can add Bootstrap's
.dropdown-menu-right class to the
.dropdown-menu class to align the menu to the right of its parent.
Add a header to your dropdown menu by adding a applying Bootstrap's
.dropdown-header class to a
Add dividers to your dropdown menu by adding a applying Bootstrap's
.divider class to a
<li> element, and also adding
Disabled Menu Items
Disable a menu item by applying Bootstrap's
.disabled class to its
You can also create split dropdown menus with button groups.