Dropdown menus are toggleable, contextual menus, used for displaying links in a list format. It facilitates users to choose one value from a predefined list. This can be made interactive with the dropdown JavaScript plugin.
The .divider class is used to separate links inside the dropdown menu with a thin horizontal border:
The .dropdown-header class is used to add headers inside the dropdown menu:
Highlight a specific dropdown item with the .active class (adds a blue background color).
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):
To right-align the dropdown, add the .dropdown-menu-right class to the element
with .dropdown-menu:
If you want the dropdown menu to expand upwards instead of downwards, change
the <div> element with class="dropdown" to "dropup":
To help improve accessibility for people using screen readers, you should
include the following role and aria-* attributes, when creating a dropdown menu: