Context Menu
Right-click menu anchored at the pointer. Portal-mounted, viewport-clamped, keyboard-navigable. Same item shape as Dropdown Menu.
Preview
example.tsxtsx
Right-click anywhere in this area
Installation
Install the individual package:
$ pnpm add @sisyphos-ui/context-menu @sisyphos-ui/coreOr use the umbrella package that bundles everything:
$ pnpm add @sisyphos-ui/uiUsage
Import the component styles and the component itself:
snippet.tsxtsx
import "@sisyphos-ui/context-menu/styles.css";
import { ContextMenu } from "@sisyphos-ui/context-menu";Labeled sections
`type: "label"` renders a non-interactive section header. Perfect for grouping destructive actions.
example.tsxtsx
Project · Q2 launch.md
Per-row table menu
Wrap each `<tr>` in its own `<ContextMenu>` so each row gets a menu scoped to its data.
example.tsxtsx
| Name | Role |
|---|---|
| Ada Lovelace | Admin |
| Alan Turing | Member |
| Grace Hopper | Member |
Right-click any row.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | ContextMenuItem[] | — | Actions, separators, and labels rendered inside the menu. |
| children* | ReactElement | — | The trigger — any element that accepts `onContextMenu`. |
| margin | number | 8 | Viewport margin so the menu never sits flush against an edge. |
| disabled | boolean | false | When true, right-click is a no-op. |
| emptyState | ReactNode | — | Rendered when `items` is empty. |
| onOpenChange | (open: boolean) => void | — | Fires when the menu opens or closes. |
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README.
Accessibility
Adheres to the Menu WAI-ARIA design pattern.
Keyboard interactions
| Key | Action |
|---|---|
| ArrowDownthenArrowUp | Move between items. |
| HomethenEnd | Jump to first / last item. |
| EnterthenSpace | Activate the focused item. |
| Esc | Close the menu; focus returns to the trigger. |
| Tab | Close the menu. |
Was this page helpful?