# Context Menu

- Page: <https://kznlabs.github.io/labsUI/components/context-menu>

## Context Menu (`context-menu`, component)

Right-click menu for an area, opening at the pointer and flipping at screen edges. Shares Dropdown Menu's items, checkbox and radio items, keyboard and typeahead; Menu key or Shift+F10 opens it from the keyboard.

- Install: `npx @kznlabs/labsui add context-menu`
- Docs: <https://kznlabs.github.io/labsUI/components/context-menu>
- Brings: button, button-variants, dropdown-menu, list, platform, use-anchor, use-controllable-state, use-dismiss, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<ContextMenuContent>`
  - `children: ReactNode`: Items, labels, groups and separators.
  - `align?: "start" | "end"` = `"start"`: Edge of the trigger the menu lines up with.
- `<ContextMenuItem>`
  - `children: ReactNode`: Label, optionally with a leading icon.
  - `disabled?: boolean`: Shown but not selectable.
  - `onSelect?: () => void`: Called on click or Enter; the menu then closes.
  - `shortcut?: string`: Right-aligned hint, e.g. "⌘S".
  - `variant?: "default" | "destructive"` = `"default"`: "destructive": red, for irreversible actions.
- `<ContextMenuCheckboxItem>`
  - `checked: boolean`: Shows the check mark.
  - `children: ReactNode`: Label, optionally with a leading icon.
  - `onCheckedChange: (checked: boolean) => void`: Called with the new state.
  - `disabled?: boolean`: Shown but not selectable.
  - `shortcut?: string`: Right-aligned hint, e.g. "⌘S".
- `<ContextMenuRadioGroup>`
  - `children: ReactNode`: `DropdownMenuRadioItem`s.
  - `onValueChange: (value: string) => void`: Called with the picked item's value.
  - `value: string`: Value of the checked item.
- `<ContextMenuRadioItem>`
  - `children: ReactNode`: Label, optionally with a leading icon.
  - `value: string`: Checked when it equals the group's `value`.
  - `disabled?: boolean`: Shown but not selectable.
- `<ContextMenuLabel>` (+ <div> props)
- `<ContextMenuSeparator>`
- `<ContextMenu>`: Right-click menu for an area. The trigger is the area; the menu opens at the pointer.
  - `children: ReactNode`: `ContextMenuTrigger` and `ContextMenuContent`.
  - `onOpenChange?: (open: boolean) => void`: Called when the menu opens at the pointer or closes.
- `<ContextMenuTrigger>` (+ <div> props): The right-clickable area. Keyboard: focus it (it is focusable) and press the Menu key or
Shift+F10; the menu opens at its center on the first item.

### Usage

```tsx
<ContextMenu><ContextMenuTrigger>…</ContextMenuTrigger><ContextMenuContent><ContextMenuItem onSelect={play}>Play</ContextMenuItem></ContextMenuContent></ContextMenu>
```

### Example: clip-card.tsx

```tsx
import { Copy, Play, Trash2 } from "lucide-react";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ClipCard({ title, onDelete }: { title: string; onDelete: () => void }) {
  return (
    <ContextMenu>
      <ContextMenuTrigger aria-label={title}>{title}</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem><Play />Play</ContextMenuItem>
        <ContextMenuItem shortcut="⌘C"><Copy />Copy link</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive" onSelect={onDelete}><Trash2 />Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```