Getting started
Foundations
Integrations
Form19
Display5
Layout4
Navigation4
Overlay8
Feedback4
Motion19
Context Menu
A menu triggered by right-clicking an element, providing contextual actions and options.
#Installation
npx @dinachi/cli@latest add context-menu#Usage
tsx
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuPortal,
ContextMenuPositioner,
ContextMenuContent,
ContextMenuItem,
ContextMenuCheckboxItem,
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuGroup,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuSub,
ContextMenuSubTrigger,
ContextMenuSubContent,
} from '@/components/ui/context-menu'#Examples
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | false | The initial open state when uncontrolled. |
| open | boolean | — | The controlled open state of the context menu. |
| onOpenChange | (open: boolean) => void | — | Callback fired when the open state changes. |
| loopFocus | boolean | true | Whether to loop keyboard focus back to the first item when the end is reached. |
| disabled | boolean | false | Whether the context menu should ignore user interaction. |
| ContextMenuItem.inset | boolean | false | Adds indentation for nested command-style layouts. |
| ContextMenuCheckboxItem.checked | boolean | — | The controlled checked state of the checkbox item. |
| ContextMenuCheckboxItem.onCheckedChange | (checked: boolean) => void | — | Callback fired when the checkbox item is toggled. |
| ContextMenuRadioGroup.value | any | — | The controlled value of the selected radio item. |
| ContextMenuRadioGroup.onValueChange | (value: any) => void | — | Callback fired when the selected radio value changes. |