Dropdown Menu
Popup list triggered by a button.
Structure
The dropdown menu uses the details and summary elements to create a button that reveals a
list of options. The summary element has a button role to look like a button, while the
other element that's displayed when the details is open,
has a dialog role on it to indicate that it is a popup.
The list is role="menu" and each item has a role="menuitem" to have proper accessibility
semantics and consistent styling. The items also support a <small> element for shortcuts.
As mentioned in other pages, details and summary elements provide a way to make a hidden
element that can be toggled using a trigger element. Using styling we can make the hidden element appear similar to
a
popup.
Examples
Variants
Several button variants are available to choose from for the dropdown menu.