NOCTA UI

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/cli add context-menu

Import the component:

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

Examples

Default Context Menu

With Separators

With Submenu

Disabled State

API Reference

ContextMenu

Prop

Type

ContextMenuTrigger

Prop

Type

ContextMenuContent

Prop

Type

ContextMenuItem

Prop

Type

ContextMenuSeparator

Prop

Type

ContextMenuSub

Prop

Type

ContextMenuSubTrigger

Prop

Type

ContextMenuSubContent

Prop

Type

Command Palette

A command palette modal (Cmd/Ctrl+K) for quick actions and navigation with search, grouping, and full keyboard accessibility

Dialog

A modal dialog component for displaying content over the main interface with backdrop, keyboard navigation and accessibility features

On this page

Installation
Examples
Default Context Menu
With Separators
With Submenu
Disabled State
API Reference
ContextMenu
ContextMenuTrigger
ContextMenuContent
ContextMenuItem
ContextMenuSeparator
ContextMenuSub
ContextMenuSubTrigger
ContextMenuSubContent