ContextMenu
Right-click context menu anchored at pointer coordinates via CSS custom properties
Category: overlay · WCAG 2.2-AA · overlay, menu, context, right-click
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The right-click target first, followed by ContextMenuItem children. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-radius-md--cascivo-shadow-md--cascivo-motion-enter--cascivo-motion-exit--cascivo-color-bg-subtle
When to use
- Offering actions contextual to an element via right-click (rename, delete, copy on a row or canvas item)
- Power-user surfaces where the desktop right-click affordance is expected
When not to use
- Primary actions that must be discoverable by all users — right-click is hidden; use a visible Button or Dropdown
- Selecting a value or filtering a list — use Combobox/Select
How to build an accessible ContextMenu in React →
Examples
Basic
<ContextMenu>
<div>Right-click me</div>
<ContextMenuItem onSelect={rename}>Rename</ContextMenuItem>
<ContextMenuItem onSelect={remove}>Delete</ContextMenuItem>
</ContextMenu>Disabled item
<ContextMenu>
<FileRow file={file} />
<ContextMenuItem onSelect={copy}>Copy</ContextMenuItem>
<ContextMenuItem onSelect={paste} disabled>Paste</ContextMenuItem>
</ContextMenu>