Context Menu

A context menu component that appears on right-click with full keyboard navigation and submenu support

Installation

Install the Context Menu component using the nocta-ui CLI:

npx nocta-ui add context-menu

Import the component:

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator
} from '@/components/ui/context-menu';

Use ContextMenuSeparator to group related menu items.

Create nested menus using ContextMenuSub, ContextMenuSubTrigger, and ContextMenuSubContent.

Both the entire context menu and individual items can be disabled.

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The trigger and content components
`className`	`string`	—	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content that triggers the menu on right-click
`disabled`	`boolean`	`false`	Disable the context menu trigger
`className`	`string`	—	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Menu items and separators
`className`	`string`	—	Additional CSS classes
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Content padding and min‑width

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Item content
`disabled`	`boolean`	`false`	Disable the item
`inset`	`boolean`	`false`	Indent the item content
`destructive`	`boolean`	`false`	Destructive styling (e.g., delete)
`className`	`string`	—	Additional CSS classes
`onClick`	`() => void`	—	Click handler

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Submenu trigger and content

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Submenu trigger content
`disabled`	`boolean`	`false`	Disable the submenu trigger
`inset`	`boolean`	`false`	Indent the trigger content
`destructive`	`boolean`	`false`	Destructive styling (not typical)
`className`	`string`	—	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Submenu items and separators
`className`	`string`	—	Additional CSS classes
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Content padding and min‑width