use UI

Context Menu

Also called right-click menu, secondary menu, shortcut menu

A menu of actions for a specific element, opened by right-click, long-press, or the context-menu key.

Example

report-q3.pdfRight-click, long-press, or press the menu key
The same actions, reachable without knowing right-click exists.

Choose an action and it is announced here.

Both menus render identical items. That duplication is the point: the right-click route is a shortcut for people who know it, and the visible button is the route for everyone else — including every touch screen, where right-click does not exist.

When to use it

  • The app is a workspace people spend hours in and speed matters — a file manager, an editor, a canvas.
  • The same actions already exist somewhere visible, and this is the shortcut on top.
  • The target is a direct object: this file, this layer, this row. The menu says which one it applies to.

When not to

  • It is the only way to reach the action. Right-click is not discoverable, and on a touch screen it barely exists.
  • The site is used casually or once. Nobody hunts for hidden menus on a page they will not see again.
  • It overrides the browser's own menu on ordinary content. Taking away copy, open-in-new-tab and inspect annoys people for no gain.

Trade-offs

  • Fastest possible route once known — no travel to a toolbar, no hunting for a kebab.
  • Unambiguous target: the actions belong to the thing under the pointer.
  • Costs no screen space at all.
  • Undiscoverable by definition. Nothing on screen says it is there.
  • Effectively absent on touch unless you also build long-press, which fights with scrolling and text selection.
  • Replacing the browser menu removes features people rely on, and they notice.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • The context-menu key and Shift+F10 must open it — that is how a keyboard user reaches one at all.
  • The trigger needs to be focusable for that to be possible; a right-click handler on a plain div is unreachable.
  • Once open it behaves like any menu: arrows move, Escape closes and returns focus to the element it belongs to.
Roles and state
  • Same contract as a dropdown: `menu` on the popup, `menuitem` on the entries.
  • The trigger element should announce that a menu exists — otherwise its presence is a secret kept from screen reader users.
  • Say what the menu applies to. “Actions for report-q3.pdf” beats a menu that floats free of its object.
Focus
Focus enters the menu on open and returns to the triggering element on close. Since the trigger is often content rather than a control, make sure it can hold focus in the first place.

In the wild

  • Figma — Right-click on a layer mirrors the menu bar exactly — the shortcut never holds anything exclusive.
  • VS Code — Editor context menu duplicates the command palette, so nothing is reachable only by mouse.

Compared with

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