UI components · Navigation
Dropdown Menu
Also called: Dropdown, Overflow menu, Action menu, More menu, Popup menu
A list of options that pops up when you click or hover a button, holding a group of related actions or links. It closes once you pick one.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAt the far right of each table row, add a "⋯" icon button. Clicking it opens a dropdown menu below the button with "Edit," "Duplicate," and "Export," plus a red "Delete" below a divider. The menu is 160px wide with a white background and a shadow, and the hovered item gets a light gray background. Close it when I click outside or press Esc, and support moving between options with the up and down arrow keys.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Dropdown Menu is what you need.
Use Dropdown Menu when
- When an object has 3 or more secondary actions and laying them all out as buttons would feel crowded, like the extra actions on a table row
- Tucking account settings, switch account, sign out, and similar entries under the avatar or account name
- When a navbar section has a few subpages that expand on hover or click
Pick something else when
Letting users pick a value in a form and submit it
Use insteadSelectOnly one or two actions. Plain buttons are clearer, so there's no need to hide them.
The most-used main action on the page. Hiding it in a menu adds a click, so make it a prominent button.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Using a dropdown menu as a value picker in a form, so the chosen value doesn't show in the box afterward
- 02
Hiding the page's only main action inside a "More" menu, where users can't find it
- 03
Piling dozens of options into the menu with no search, so users have to scroll a long way to find one
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A trigger (button, icon, or text link) and a popup menu layer. The layer holds menu items, which can have icons, dividers, group titles, and second-level submenus.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A dropdown menu normally shows only its trigger, like "More," "⋯," or the user's avatar. Click it and a list of menu items pops up below the trigger. Pick one and the action runs and the menu closes automatically. It's good for tucking away secondary actions, like "Edit, Duplicate, Delete" in a table row, or "Account settings, Sign out" under the avatar.
It's often confused with a select. A select is a form control whose chosen value shows in the box and gets submitted with the form. A dropdown menu runs an action when clicked and doesn't keep a selected state. It's also different from a navbar. The navbar is the main entry point that's always on the page, while a dropdown menu is just a set of options that pops up temporarily.
When there are many menu items, group them with dividers. Put destructive actions like delete last, in a standout color.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-dropdown-menu- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[role="menu"]:not(.ant-menu-root):not(.n-menu):not(nav *):not(aside *).dropdown-menu.ant-dropdown-menu.el-dropdown-menu[class*="MuiMenu-paper"].arco-dropdown.t-dropdown.n-dropdown-menu[data-slot="dropdown-menu-content"]
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026