Context Menu
Right-click menu anchored at the pointer. Portal-mounted, viewport-clamped, keyboard-navigable. Same item shape as Dropdown Menu.
Preview
Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.
Installation
Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.
$ pnpm add @sisyphos-ui/reactThen import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";
Usage
import { ContextMenu } from "@sisyphos-ui/react";
export const Row = () => (
<ContextMenu items={[
{ label: "Open", onSelect: () => {} },
{ label: "Rename", onSelect: () => {} },
{ type: "separator" },
{ label: "Delete", destructive: true, onSelect: () => {} },
]}>
<div className="row">Right-click me</div>
</ContextMenu>
);Labeled sections
`type: "label"` renders a non-interactive section header. Perfect for grouping destructive actions.
Per-row table menu
Wrap each `<tr>` in its own `<ContextMenu>` so each row gets a menu scoped to its data.
| 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 on npm.
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. |