ContextMenu
Adds a scope-aware action menu without suppressing the native menu when no replacement is available.@gemologic/sheen · overlaysPlayground
This example has no scalar controls. Its validated source remains interactive below.
Account A
<ContextMenu as="div" items={[{ kind: "action", id: "open", label: "Open", onSelect: () => {} }]}>Account A</ContextMenu>Variant matrix
Row actions
Account A
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/ContextMenu.tsx- Tokens
--sheen-color-bg-raised--sheen-color-focus-ring--sheen-elevation-overlay
Accessibility
Role: menu and native trigger semanticsKeyboard: Shift+F10, ContextMenu, ArrowUp, ArrowDown, Home, End, Enter, Space, EscapeDo
- Use the same action source as the visible overflow or selection controls.
- Disable or omit empty replacements so the native browser menu remains available.
Do not
- Do not suppress contextmenu without opening an equivalent accessible menu.
- Do not make right-click the only way to reach an action.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
as | "div" | "tr" | "li" | div | Native div, li, or table-row trigger retained in the document. |
items * | readonly MenuItem[] | — | Validated action, checkbox, radio, separator, and submenu definitions shared with DropdownMenu. |
disabled | boolean | false | Leaves the platform context menu available and prevents long-press replacement. |
onOpenChange | (open: boolean) => void | — | Receives requested open-state changes. |
menuClass | string | — | Additional class on the portaled menu surface. |