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.
You can say this to an AI Agent
Put Rename, Duplicate, and Archive for each project row in a Dropdown with text labels; keep confirmation before Archive. Open and run reversible actions one by one, confirming the menu targets its current row and is fully keyboard-operable.
When to use it
- Secondary row actionsMore actionsRenameCopy linkMove to…Delete
- Account menuLProfileAccount settingsSign out
- Sort optionsSaveMore ▾
- A compact set of related commandsSave ⌘SSave As ⇧⌘SExport ⌘E
When NOT to use it
- Hide the main action in a More menuSelect a city ▾BeijingShanghaiShenzhen
- Put a long, searchable dataset in an action menuMore ▾Delete
- Open the menu from an unlabeled mystery iconPreviewMore ▾A key publishing action hidden under “More” is hard to find
- Mix dangerous actions with common choices without separationNewMove to ▸DeleteProject AProject B
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check