Dropdowns

Menus allow users to make a selection from multiple options. They are less prominent and take up less space than selection controls, such as a set of radio buttons.

Variations

copydone

Usage

Use a dropdown menu to display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Specs

Dropdowns require a trigger (usually a <button> element). They are implemented with an <ul> element and they consist of :

  • Main text: 1rem (16px) font size with 1.25rem(20px) horizontal padding and 0.5rem(8px) vertical padding.
  • Icon: 1.25rem (20px) width and height with 0.5rem(8px) distance from the text.
  • Assistive text: 0.875rem (14px) font size and 0.25rem(4px) vertical distance from the main text.

The width of the dropdowns can be adjusted by adding a width class to the <ul> element.

Accessibility notes

  • The trigger button has an aria-expanded role with a true/false value, that allows vocalizing menu states (open or closed).
  • Ιf the dropdown menu is used within a navigation menu the aria-current="page" attribute should be assigned to the item corresponding to the active page.
  • A role="separator" role can be assigned to an empty <li> to separate the menu in sections.

Check out the latest release!