Skip to content
UX Atlas
Plate CMP·018 · ComponentGrid F1 · Rev. 2026-08-14

Menu

A list of actions revealed on demand, which is where infrequent operations belong.

ComponentCraft conventionIntermediate

Definition

A menu presents a set of actions, usually opened from a trigger. In ARIA terms a menu contains commands; a list of navigation links is not a menu even when it looks like one.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Requirements
  3. 3Contents and behaviour
  4. 4In practice
  5. 5Commonly confused with
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Infrequent actions on an object.
  • Contextual operations in a list row.

Common mistakes

  • Hover-opened menus.
  • Deep submenus.
  • Frequent actions buried in overflow.
  • Menu roles applied to navigation links.

Requirements

  • Open on click. Hover-opened menus are fragile to steer into and impossible on touch.
  • Arrow keys move between items, Escape closes, Enter activates, and typing jumps to a matching item.
  • Group related items with separators, and place destructive actions last, separated.
  • Show keyboard shortcuts alongside items where they exist.
  • Avoid submenus. If you must, add pointer-intent handling and a close delay.
  • Do not use ARIA menu roles for a list of links. Use a list of links.

Contents and behaviour

Do

  • Put actions in it, phrased as verbs.
  • Support arrow keys, Home, End, typeahead and Escape.
  • Separate destructive items from the rest, visually and by position.
  • Show keyboard shortcuts beside the items that have them.

Do not

  • Mix navigation, actions and settings in one menu with no grouping.
  • Hide the primary action of a screen inside an overflow menu.
  • Open a submenu on hover with no tolerance for a diagonal pointer path.
  • Use a menu where a list of two buttons would do.

In practice

  1. i.

    Everything in the three dots

    Overflow as a dumping ground

    A row menu holding fourteen items, including the two people used constantly, cost two interactions for every common task. Promoting the two to visible controls halved the interaction count for most sessions.

  2. ii.

    Delete, one item above Duplicate

    Destructive placement

    Adjacent items of equal size are equally easy to hit. Separating the destructive item, and putting it last with a divider, is the cheapest protection available.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Dropdown

Component

A form control that picks one value from a set and displays the current choice.

Key difference

A menu offers actions and runs one. A dropdown selects a value, reports it back to a form, and changes nothing until the form is submitted.

Use Menu when

  • Each item does something rather than standing for a value.
  • The items are unrelated to each other.
  • There is nothing to show as the current state afterwards.

Use Dropdown when

  • The items are values of one field.
  • The chosen value has to stay visible afterwards.
  • It will be submitted, validated or reset with the rest of the form.

Learn about Dropdown

Local chart

CMP·018 · Region III · Grid F1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Flexibility and Efficiency of UseHEUR·007 · PRINCIPLES BEHIND THISSteering LawLAW·016 · PRINCIPLES BEHIND THISContent on Hover or FocusA11Y·018 · DEPENDS ONKeyboard NavigationA11Y·002 · DEPENDS ONCommand PalettePAT·018 · OFTEN USED WITHDestructive ActionsPAT·009 · OFTEN USED WITHNavigationPAT·001 · OFTEN USED WITHDropdownCMP·019 · COMMONLY CONFUSED WITH

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Data TableAn Enterprise WorkflowNavigation

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.