Context menu or row menu button?

Ship both when you can. Right click is fast for mouse users who already know the row. A three-dot button on the row, or a single row action key, is how everyone else reaches the same list. Gmail keeps both on every message row.

Where should the panel open?

At the pointer, offset enough that the cursor is not covering the first item. Flip to the other side of the screen when the list would run off the edge. Radix and most libraries handle collision for you if the trigger is the row.

How many items belong in a context menu?

Roughly the same cap as any action menu: about ten, grouped with dividers when you pass six. If the list needs search, move the actions into a modal or a command palette.

Should mobile use long press?

Long press is the touch equivalent of right click when the row is not a link. Still offer a visible button for the list, because long press is never discoverable on its own.

Can a context menu include checkboxes?

Yes, for view options tied to the object, like Show preview on a file row. Keep the list an action list: each checkbox flips something immediately, the way View menus do in desktop apps.

What about destructive actions?

Put Delete last, colour it, and separate it with a divider. For permanent loss, the menu item should open a confirmation step, the same rule as any other menu.

Context menu

A context menu is a list of actions opened from the object they affect, usually with a right click or a long press. The pointer position sets where the panel appears.

ActionsBuild difficulty: Hard<div role="menu">

Also called Right-click menu, Contextual menu.

Q3 report.pdf
2.4 MB · edited yesterday
Creative brief.docx
840 KB · edited 3 days ago
Logo pack.zip
12 MB · edited last week

Right-click a file, or open the row menu with Tab and Enter.

Right-click a row for the context menu. Use the three-dot button on the same row when a pointer is not an option.

For designers

A context menu answers the question people ask when their pointer is already on the thing: what can I do to this one. Figma, Finder, and Gmail all lean on it for row-level work, because it keeps the row clean while still offering six actions to anyone who asks.

Linear opens the same list from right click and from the three-dot button at the end of the row. That duplication is the whole accessibility story: the gesture is optional convenience, the button is the contract.

The cost is discoverability. Right click is learned on desktop and absent on most phones. Long press helps on touch, but only if someone already knows to try it. Every action in the context menu needs a second front door: a row button, a keyboard shortcut, or a command palette entry. WCAG does not require right click anywhere; it does require that every action be available without one.

Use a context menu when

Actions apply to one row, card, or canvas object and the pointer is already on it
Power users expect right click on desktop, and the list is short enough to scan in one glance
The same actions would clutter the row if every one had its own visible button

Reach for something else when

The actions apply to the whole page or a toolbar, not to one object. Use a menu instead.
A single icon button can hold the list without hiding actions people use every hour. Use a popover instead.
There is no sensible place to repeat the actions for keyboard and touch users. Use a menu instead.
Choosing an item only reveals more settings rather than running something immediately. Use a popover instead.

Variants

With shortcuts

Destructive last

Shortcuts teach the keyboard path. A divider before Delete marks the line that cannot be undone.

With shortcuts. Trailing hints for the actions people will memorize: Duplicate, Rename, Delete. Show them exactly as the operating system prints them.

Destructive last. A divider, then red text for the item that cannot be undone. Colour is not the only signal; position does half the work.

Checkbox rows. For toggles on the object itself, like Show grid on a canvas layer. Still an action list, not a form field.

The row is the trigger. Wrap it in an element that listens for context menu events, or use a library primitive that already does. The menu itself is a role="menu" positioned at the pointer, with menuitem children that run on Enter.

<ul>
  <li>
    <div tabindex="0" aria-label="Q3 report.pdf">
      Q3 report.pdf
    </div>
  </li>
</ul>
<!-- opens on contextmenu event -->
<div role="menu">
  <div role="menuitem">Open</div>
  <div role="menuitem">Rename</div>
  <div role="menuitem">Duplicate</div>
  <div role="separator"></div>
  <div role="menuitem">Delete</div>
</div>

Arrow keys move between items once the menu is open. Escape closes it and returns focus to the row. Typeahead jumps to the first item whose label starts with the letter pressed, which matters once the list passes five items.

Contrast on the focused row needs 3:1 against the panel behind it (WCAG 1.4.11). The rebuild teams get wrong is attaching the menu to the whole page: if every row shares one menu instance, wire each row as its own trigger so the actions always know which object they affect.

Edge cases

Empty space. Right click on whitespace can show a different list, like New file on a folder background. Label the two menus differently in code so QA can tell them apart.

Selected rows. When multi-select is on, open the menu on the selection, not only the row under the pointer, and phrase the items in plural where it matters.

Nested targets. A link inside a row should not steal the context menu from the row. Decide which layer wins and stick to it.

Common questions

Context menu or row menu button?: Ship both when you can. Right click is fast for mouse users who already know the row. A three-dot button on the row, or a single row action key, is how everyone else reaches the same list. Gmail keeps both on every message row.
Where should the panel open?: At the pointer, offset enough that the cursor is not covering the first item. Flip to the other side of the screen when the list would run off the edge. Radix and most libraries handle collision for you if the trigger is the row.
How many items belong in a context menu?: Roughly the same cap as any action menu: about ten, grouped with dividers when you pass six. If the list needs search, move the actions into a modal or a command palette.
Should mobile use long press?: Long press is the touch equivalent of right click when the row is not a link. Still offer a visible button for the list, because long press is never discoverable on its own.
Can a context menu include checkboxes?: Yes, for view options tied to the object, like Show preview on a file row. Keep the list an action list: each checkbox flips something immediately, the way View menus do in desktop apps.
What about destructive actions?: Put Delete last, colour it, and separate it with a divider. For permanent loss, the menu item should open a confirmation step, the same rule as any other menu.

Last reviewed 27 AUG 2026