All components (204)

Context menu

Actions · ContextMenu

What it is and when to use it

The right-click menu: an area that, when pressed with the secondary button, opens a list of actions right at the pointer. Same actions, sections, submenus and keyboard as ActionMenu.

When to use it

Table rows, files, cards: shortcuts to what can already be done another way.
Always alongside a visible route (a three-dot ActionMenu): right-click is not discoverable on its own and does not exist on every mobile system.

When not to

As the only way to reach an important action.

Keyboard: the menu key or Shift+F10 opens it next to the focused element, with focus on the first action. Arrows, Home, End and typing to move; Escape closes it and returns focus.

Accessibility: it is a role="menu" named by label. With disabled the browser shows its usual menu.

What it looks like

Right-click here

You have not picked anything yet.

<ContextMenu
  label="File actions"
  onSelect={alElegir}
  actions={[
    { key: 'abrir', label: 'Open', detail: '⏎' },
    { key: 'compartir', label: 'Share', children: [{ key: 'enlace', label: 'Copy link' }] },
    { key: 'borrar', label: 'Delete', destructive: true, separatedBefore: true },
  ]}
>
  <Card title="quarterly-report.pdf">Right-click here</Card>
</ContextMenu>

Props

Import it with import { ContextMenu } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	The area that responds to the right click (or to the menu key / Shift+F10).
`label`required	`string`	What is announced on opening. "Actions for invoice F-2026-0007", not "Menu".
`onSelect`required	`(key: string) => void`	—
`actions`	`readonly MenuAction[]`	Flat list of actions. To group them with titles, use `sections`.
`className`	`string`	Extra class on the area, to position it.
`disabled`	`boolean`	No menu: the browser shows its usual one.
`disabledKeys`	`readonly string[]`	Keys disabled all at once, without touching the list of actions.
`minWidth`	`string`	Minimum width of the panel, so it does not jump between states.
`onOpenChange`	`(open: boolean) => void`	—
`sections`	`readonly MenuSection[]`	Groups with a title: "Export", "Danger zone".

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech:

Interactivo