Context Menu
Overlay
Navigation
Right-click context menu with keyboard navigation and custom actions.
Preview
Right-click on the card to open the context menu
Right-click me!
With Section Labels
Organize menu items with section headers
Project Document
Right-click to see organized menu with labels
Props
Component API reference
ContextMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
icon | LucideIcon | — | Icon component to display |
shortcut | string | — | Keyboard shortcut text |
destructive | boolean | false | Destructive action styling |
disabled | boolean | false | Disable the menu item |
onSelect | () => void | — | Click handler |
ContextMenuLabel
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Label text content |
Usage
Import and implementation examples
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuLabel,
} from '@/components/ui/context-menu'
import { Copy, Edit, Trash2 } from 'lucide-react'
<ContextMenu>
<ContextMenuTrigger>
<div>Right-click me!</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem icon={Copy} shortcut="⌘C">
Copy
</ContextMenuItem>
<ContextMenuItem icon={Edit} shortcut="⌘E">
Edit
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuLabel>Danger Zone</ContextMenuLabel>
<ContextMenuItem icon={Trash2} destructive>
Delete
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>Features
Built-in functionality
- Right-click trigger: Opens on contextmenu event
- Keyboard shortcuts: Display shortcut hints
- Section labels: Group related items with headers
- Destructive styling: Red color for dangerous actions
- Icon support: Add icons to menu items
- Separators: Visual dividers between sections
- Click outside: Closes when clicking outside
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="menu" for menu containerrole="menuitem" for itemsaria-disabled for disabled itemsaria-labelledby for section labelsKeyboard Navigation
| Key | Action |
|---|---|
| Arrow Up/Down | Navigate items |
| Enter/Space | Activate item |
| Escape | Close menu |
Notes
- Focus management on menu open
- Screen reader announces item labels
- Shortcuts announced with items