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.
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
Rename
Copy link
Delete
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
RenameCopy linkDelete
When related actions need to share one entry point
Shortcut
Save⌘SExport⌘E
When common actions have keyboard shortcuts
Grouped
ViewCompact ModeOperationExport
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
···
Rename
Copy link
Delete
Account menu
Sort menu
Export options
Further reading