# ContextMenu

> Menu opened by right-click, long-press or the keyboard (Menu key, Shift+F10) on its trigger area.

Source: https://ui.jcsoftdev.com/docs/components/context-menu

Menu opened by right-click, long-press or the keyboard (Menu key, Shift+F10) on its trigger
area. It reuses the dropdown-menu primitive anchored to the pointer, so roving focus,
typeahead, submenu keys, Escape and collision handling come for free.

## Import

```ts
import { ContextMenu } from "@jcsoftdev/ui/overlays";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/overlays/context-menu`.

## Usage

```tsx
export const Default: Story = {
  render: () => (
    <div className="w-full max-w-md">
      <Area />
    </div>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` * | `ReactNode` |  |  |
| `onOpenChange` | `((open: boolean) => void)` |  |  |
| `defaultOpen` | `boolean` | `false` | Starts open, anchored at `position` (viewport pixels). Useful for docs and visual tests. |
| `position` | `{ x: number; y: number; }` |  | Initial anchor point in viewport pixels. Defaults to the origin until the first right-click. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/overlays-contextmenu--default)
- [Narrow](/storybook/?path=/story/overlays-contextmenu--narrow)
- [Brutal Preset](/storybook/?path=/story/overlays-contextmenu--brutal-preset)
- [Open By Default](/storybook/?path=/story/overlays-contextmenu--open-by-default)

## Source

`packages/ui/src/overlays/context-menu/context-menu.tsx`