switch·Esc back

Dropdown

You might say

When someone hovers over their username, show a dropdown with Settings and Sign out.

Open a compact menu of actions or destinationsA dropdown keeps secondary choices behind a trigger when showing them all would add clutter. Name the trigger clearly and keep the menu short and grouped. A frequent or important action should usually remain visible instead of being hidden.
DropdownSelect

Dropdown opens actions or navigation. Select chooses and saves a form value.

When to use it

  • Secondary row actions
  • Account menu
  • Sort options
  • A compact set of related commands

When NOT to use it

  • Hide the main action in a More menu
  • Put a long, searchable dataset in an action menu
  • Open the menu from an unlabeled mystery icon
  • Mix dangerous actions with common choices without separation
Anatomy
A button or text control that opens the menu
A floating menu that closes when someone clicks outside it
An action can have icons and shortcut keys
Group related menu items; separate destructive actions
Variants
Basic
When related actions need to share one entry point
Shortcut
When common actions have keyboard shortcuts
Grouped
The menu contains multiple types of operations and needs to be grouped by category
Typical use cases
More actions
Project files
📄 Homepage-refresh.fig2 hours ago ···
📄 Design-guidelines.mdYesterday ···
Account menu
Workbench 🔔
Sort menu
Unnamed document.md B I
Export options
Weekly Report · Issue 29
Further reading