Dashboard
Basic Dropdown
The .dropdown
class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle
and the data-toggle="dropdown"
attribute. The .caret
class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the .dropdown-menu
class to a <ul>
element to actually build the dropdown menu.
Dropdown Divider
The .divider
class is used to separate links inside the dropdown menu with a thin horizontal border:
Dropdown Header
The .dropdown-header
class is used to add headers inside the dropdown menu:
Disable and Active items
To disable an item in the dropdown menu, use the .disabled
class (gets a light-grey text color and a"no-parking-sign" icon on hover):
Dropdown Position
To right-align the dropdown, add the .dropdown-menu-right
class to the element with .dropdown-menu:
Dropup
If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropdown" to "dropup"
:
Dropdown Accessibility
To help improve accessibility for people using screen readers, you should include the following role
and aria-*
attributes, when creating a dropdown menu:
Dropup
If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropdown" to "dropup"
: