Dropdown menus from the Kombai gallery: a payroll tool's row actions, a craft-course site's account menu and a password vault's sort menu.
What is a dropdown menu?
A dropdown menu is a floating list that opens from a button, like a ••• icon, an avatar or a Create button. It holds actions that would crowd the screen if they were all shown, or a few options to choose from. Picking an item runs it and closes the menu.
- The menu floats over the page next to the button that opened it.
- Related items sit in groups, with risky actions like Delete last and in red.
Dropdown menus show up across table, CRM, settings and project tracker screens.
When to use a dropdown menu
- Secondary actionsRename, duplicate, export and delete for a row, a card or a page.
- Account and app menusProfile, settings, billing and sign out behind an avatar.
- Create menusOne New button that offers several kinds of thing to make.
When not to use one
- The main actionPut the action most people need on its own button.
- Form valuesFor a value that stays chosen, use a select or radio buttons.
- Site navigationMany grouped links across a site belong in a mega menu or a nav.
Anatomy of a dropdown menu
This one works. Click the ••• button, or tab to it and press Enter, then use the arrow keys, a first letter, Enter or Escape.
Pick an action from the menu.
- Closed
- Open
- Focused item
- Disabled item
- TriggerThe button that opens it
- MenuThe floating list
- Menu itemOne action, icon optional
- SeparatorSplits the groups
- Destructive itemLast, and in red
- StatesClosed, open, focused, disabled
Dropdown menu variants
We sorted every dropdown menu design in the Kombai gallery and found five patterns. Browse all 50 web and 30 mobile designs.
1. Row action menus
The default. A ••• button at the end of a row or a card opens the actions for that one item.
2. Account menus
An avatar in the header opens the profile, settings, plan and sign out, sometimes with a theme switch.
3. Create menus
A New or plus button opens the kinds of thing people can make, often with an icon and a one-line description each.
4. Menus with shortcuts and submenus
Dense menus in work tools that show each keyboard shortcut and tuck related actions into a submenu.
5. Sort and choice menus
A short list of options with a check next to the current one, for sorting, a quantity or a style.
Where dropdown menus show up
Tables and records
View options, sheet actions and bulk exports above a table, out of the way until needed.
AI composers
A plus button in the prompt box that offers to upload a file, pick from a library or start a kind of output.
Mobile overflow menus
A ••• button on a phone screen opens the less common actions for the route, chat or profile on screen.
Filters
Filter menus with checkboxes, radio options or grouped sort and status settings over a list.
Dropdown menu vs similar components
Build notes
- Make the trigger a <button> with aria-haspopup="menu" and aria-expanded.
- Give the list role="menu" and each action role="menuitem". Use menuitemradio or menuitemcheckbox for choices.
- Enter, Space or Down Arrow opens the menu on the first item. Escape closes it and puts focus back on the button.
- Up and Down Arrow move between items, Home and End jump to the ends, and a typed letter jumps to the next match.
- Tab closes the menu instead of moving through it, so move focus into the menu when it opens.
- Put destructive actions last, after a separator, and confirm the ones that cannot be undone.
FAQ
What's the difference between a dropdown menu and a select?
A dropdown menu holds actions, like Rename or Delete, and runs the one people pick. A select holds values for a form field, like a country, and keeps the chosen value on show. Use a native <select> or a listbox for values and a menu for commands.
Should a dropdown menu open on hover?
No. Open it on click or tap. Hover menus open by accident, close when the pointer slips off and do nothing on touch screens, while a click works the same for mouse, touch and keyboard.
How many items should a dropdown menu have?
Few enough to scan at a glance. Group related items with separators or small headings, move rare actions into a submenu, and if the list keeps growing, the actions probably need their own page or panel.
Where should Delete go in a dropdown menu?
At the bottom, after a separator, in red, so people do not hit it by mistake while scanning. If it cannot be undone, ask for confirmation or offer an Undo right after.
Related terms
All glossary terms · Browse 50 web and 30 mobile dropdown menu designs