Context Menu
View on StorybookStorybookA menu component that appears on right-click (or long press on touch devices). Perfect for contextual actions with full RTL support and keyboard navigation.
Preview
Installation
Terminalbash
Usage
Reacttsx
Examples
With Icons and Shortcuts
tsx
With Checkboxes
tsx
File Explorer Example
Props
ContextMenu
| Name | Type | Default | Description |
|---|---|---|---|
onOpenChange | (open: boolean) => void | undefined | Callback when open state changes |
This component is built on top of Radix UI's Context Menu primitive. For a complete list of props for each sub-component, refer to the Radix UI documentation.
Accessibility
Keyboard Navigation
SpaceOpens the menu when trigger is focusedEnterOpens the menu and activates the first item↓Moves focus to next menu item↑Moves focus to previous menu itemEscCloses the menu
Touch Devices
On touch devices, context menus can be triggered with a long press. The component handles this automatically, providing a consistent experience across devices.
ARIA Attributes
Radix UI automatically manages all ARIA attributes including roles, aria-expanded, and focus handling for screen reader compatibility.
Use Cases
Right-click actions on content
File and item operations in lists
Canvas and editor contextual tools
Table row operations
Best Practices
Do
- ✓ Mirror familiar OS context menu patterns
- ✓ Include keyboard shortcuts for all actions
- ✓ Keep the menu close to the click position
Don't
- ✗ Don't make context menu the only way to access actions
- ✗ Don't replace browser default context menu without reason
- ✗ Don't include destructive actions without confirmation