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