## Context Menu (S—096)

Right-click or long-press anywhere in an area to open a menu at the pointer, with shortcuts and a submenu.

- URL: https://sundaeui.dev/components/context-menu
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/context-menu.json`
- Tags: shortcut, long-press, context-menu, submenu, menu, right-click

The menu opens exactly where you clicked and flips to stay inside its container. Items show their shortcuts; one opens a submenu to the side on hover or arrow-right.
On touch, a 450 ms long-press opens it. Escape or clicking outside closes it and returns focus.

### Usage

```tsx
import { ContextMenu } from '@/components/sundae/context-menu'

<ContextMenu />
```

### Props

- `items` (`MenuItem[]`, required): Items: label, shortcut, danger, children.
- `onSelect` (`(id: string) => void`): Called with the chosen item id.
- `children` (`ReactNode`, required): The area that listens for the context menu.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- File managers, canvases, tables, editors.

### When not to use

- Primary actions: never hide them only in a context menu.

### Accessibility

- role="menu" / "menuitem" with aria-haspopup on the submenu item; arrow keys move, → opens the submenu, ← closes it.
- Shift+F10 and the ContextMenu key open it from the keyboard.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Shift + F10: Open from keyboard
- ↑ / ↓: Move
- → / ←: Open / close submenu
- Esc: Close