💠 Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Usage

The Dropdown Menu component is a versatile UI element that presents a list of options or actions in a compact space. Triggered by a button or another control, the dropdown menu appears and provides additional navigation or command choices without cluttering the primary interface.

It's commonly used for settings, additional actions, and selecting from a list of items.

When to use

• Condensed navigation: Use a Dropdown Menu to condense navigation options or actions that do not need to be visible at all times.
• Secondary options: Employ a Dropdown Menu for secondary options or actions that are relevant in the context of a primary task or selection.
• Action lists: Dropdown Menus can be used to present a list of actions or functions related to a specific UI element or task, such as editing or sharing content.

Avoid using Dropdown Menus for critical actions that users need to access frequently and quickly, as the extra click can become a hindrance. Dropdown Menus should also not be overused on a page, as too many can make the interface feel cluttered and complicated. When dealing with a long list of options, consider alternative UI elements, like a searchable select component, that can provide a better user experience.

Examples

Default

Checkboxes

Radio Group

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the Menu Button WAI-ARIA design pattern (opens in a new tab).

Keyboard interactions