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

Default Context Menu

A basic context menu with menu items and shortcuts

Right click here

Context Menu with Checkbox

Context menu with checkbox items for toggleable options

Right click for checkbox menu

Context Menu with Radio Group

Context menu with radio group for single selection

Right click for radio menu
Current: pedro

Context Menu with Submenu

Context menu with nested submenus for hierarchical options

Right click for submenu

#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
disabled	boolean	false	When true, prevents the context menu from opening
children	React.ReactNode	—	The trigger element and menu content