Dropdown Menu

Overview

Dropdown Menu is a contextual option list that surfaces navigation, actions, and selectable items in a floating panel. Each of its 8 content variants pre-configures item layout with the right leading visual for its data type, from user avatars to tokens, files, and country flags, with flexible item counts and scrollable content for longer lists.

When should you use them?

Use a dropdown menu to present a list of actions, navigation links, or commands triggered from a button or icon, like an account menu, a row's action menu, or a 'more options' control. Use a Select Field instead when you're capturing a value in a form.

How should you use them?

• Use a dropdown menu for actions and navigation; use a Select Field for choosing a value in a form.
• Choose the variant that matches your items (User, File, Country, and others) for the right leading visuals.
• Keep menu items short and action-oriented, starting with a verb where they trigger an action.
• Turn on the scroll bar for longer lists so the menu keeps a predictable footprint.
• Group or separate related items so the list stays easy to scan.
• Keep the menu keyboard-navigable with arrow keys and dismissible with Escape.