# ContextMenu

Context actions at the pointer or keyboard target, sharing the Menu interaction engine.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, ContextMenu, Surface } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ContextMenu label="Project actions" items={[{id:"rename",label:"Rename"},{id:"duplicate",label:"Duplicate"}]} onAction={id => console.log(id)}><Surface padding="6">Right-click or use Shift+F10.</Surface></ContextMenu>
    </FloodRoot>
  );
}
```

## Design notes

- Right click opens at the pointer; ContextMenu or Shift+F10 opens near the actual focused target. The wrapper is keyboard-focusable and named.
- Uses the same Menu items, preferences, nested layers, typeahead and keyboard navigation. Leaf commands close the tree; Escape unwinds one level and restores the real source focus.
- disabled preserves the native browser context menu. Controlled open and onAction remain host-owned. Provide a visible Menu action as a primary alternative on touch devices. Introduced in 0.2.7.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `items` | `readonly MenuItem[]` | `Required` |
| `onAction` | `(id: string) => void` | `—` |
| `children` | `ReactNode` | `Required` |
| `open` | `boolean` | `—` |
| `defaultOpen` | `boolean` | `false` |
| `onOpenChange` | `(open: boolean) => void` | `—` |
| `disabled` | `boolean` | `false` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"sm"` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "role">` | `Forwarded` |