use UI

Dropdown Menu

Also called action menu, overflow menu, kebab menu, more menu

A menu of actions opened from a visible button, closing when one is chosen or focus leaves.

Example

  • invoice-402.pdf84 kB
  • brand-guidelines.fig12 MB

Choose an action and it is announced here.

The trigger is visible, so the actions are findable. Its accessible name names the row — More actions for invoice-402.pdf — because three identical “More” buttons tell a screen reader user nothing about which file they are about to delete.

When to use it

  • A row or card has more actions than fit, and the extras belong behind one button.
  • The actions do something rather than set a value — rename, duplicate, delete.
  • The set is short. Past about ten items a menu becomes a list you have to read rather than scan.

When not to

  • It picks a value for a form. That is a select or a combobox, and using a menu means the value never reaches the form.
  • There is only one action. A button is shorter, faster, and does not hide what it does.
  • The actions are the primary task. Burying what people came to do behind a kebab icon costs a click every time.

Trade-offs

  • Discoverable — the trigger is visible, so the actions are findable without knowing they exist.
  • Keeps dense rows readable by moving rarely used actions out of sight but within reach.
  • Works with pointer, keyboard and touch without any extra affordance.
  • Every action inside costs at least two interactions instead of one.
  • A kebab icon says nothing about what is behind it, so labels have to do all the work.
  • Menus inside scrolling containers need care, or the popup detaches from its trigger.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • Enter, Space or Down opens it and puts focus on the first item; Up opens it on the last.
  • Arrow keys move between items, Home and End jump to the ends, and typing a letter jumps to the next item starting with it.
  • Escape closes and returns focus to the trigger — without that return the keyboard user is dropped at the top of the document.
Roles and state
  • The popup is a `menu` and each entry a `menuitem`; the trigger carries `aria-haspopup="menu"` and `aria-expanded`.
  • An icon-only trigger needs an accessible name of its own — “More actions for Invoice 402” beats a bare “More”.
  • Items that toggle something are `menuitemcheckbox`, not `menuitem` with a tick drawn next to them.
Focus
Focus moves into the menu on open and comes back to the trigger on close, whether the user chose something or pressed Escape. Losing it to the body is the most common bug in a hand-rolled menu.

In the wild

  • GitHub — The kebab on every row — rename, transfer, archive — with the repository name in the button's accessible name.
  • Google Drive — Same actions as the right-click menu, which is exactly the pairing this pattern expects.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.