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.