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:

Terminal

npx nocta-ui add context-menu

Then import the component:

Import

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

Basic Usage

Right-click on the area below to open the context menu

Right-click here

With Separators

Use ContextMenuSeparator to group related menu items.

Context menu with separators

Right-click for menu with separators

With Submenu

Create nested menus using ContextMenuSub, ContextMenuSubTrigger, and ContextMenuSubContent.

Context menu with submenu

Right-click for submenu example

Disabled State

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

Disabled context menu and items

Context menu disabled

Some items disabled

File Manager Example

A real-world example showing a file manager with context menus.

File manager context menu example

Positioning

The context menu automatically positions itself relative to the cursor position and avoids viewport collisions.

<ContextMenuContent
  side="bottom"        // 'top' | 'right' | 'bottom' | 'left'
  align="start"        // 'start' | 'center' | 'end'
  sideOffset={4}       // Distance from cursor
  alignOffset={0}      // Alignment offset
  avoidCollisions={true} // Prevent viewport overflow
>
  {/* Menu items */}
</ContextMenuContent>

The Context Menu component supports full keyboard navigation:

Right-click: Open context menu
Arrow Keys: Navigate between menu items
Enter: Activate selected item
Escape: Close menu
Tab: Navigate through focusable elements
Home/End: Jump to first/last item

Accessibility

The Context Menu component is built with accessibility in mind:

ARIA Attributes: Proper role="menu", aria-expanded, aria-haspopup
Keyboard Navigation: Full keyboard support with arrow keys
Focus Management: Proper focus handling and restoration
Screen Reader Support: Announces menu state and items
Portal Rendering: Renders outside component tree to avoid z-index issues

Props

ContextMenu

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

ContextMenuTrigger

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

ContextMenuContent

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Menu items and separators
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side relative to cursor
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment relative to cursor
`sideOffset`	`number`	`0`	Distance from cursor
`alignOffset`	`number`	`0`	Offset for alignment
`avoidCollisions`	`boolean`	`true`	Prevent viewport overflow
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	—	Escape key handler
`