Skip to main content
Designsystemet logoDesignsystemet logo

Components

Dropdown

Dropdown is a generic dropdown list. It lays the foundation for building menus and lists.

OverviewCodeAccessibility

We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.

There is built-in accessibility in the Popover API for open and closed state, as well as keyboard navigation.

Keyboard navigation

  • Enter or Space opens or closes the menu
  • Enter or Space selects the highlighted item
  • Esc closes the menu

Keyboard

Because of the different usage patterns for Dropdown, we do not include built-in keyboard handling. If you are creating a menu, you must implement your own keyboard interactions to enable navigation within the menu. See the "Menu and Menubar Pattern" at W3C. We offer RovingFocus, which is a utility component for keyboard navigation.

If you use Dropdown without adding your own logic, any focusable elements inside Dropdown.List can be navigated using the Tab key, and you can close the Dropdown with the Escape key.

Edit this page on github.com (opens in a new tab)