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-bs-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":