Context Menu

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The ContextMenu component displays a menu of actions or options triggered by a right-click (or long-press on touch devices). Built on Radix UI primitives, it supports keyboard navigation, submenus, checkboxes, radio groups, and keyboard shortcuts.

Basic Usage

Right-click to open menu

File Manager

A more complete example with labels, icons, a View submenu with checkboxes and radio groups, a Share submenu, and a Properties item.

Right-click to open menu

With Checkboxes and Radio

A stateful example demonstrating ContextMenuCheckboxItem and ContextMenuRadioGroup with controlled state.

Right-click to open menu

With Submenus

Demonstrates deeply nested submenus, such as an Edit menu with a Find submenu containing multiple options.

Right-click to open menu

Custom Trigger Area

The ContextMenuTrigger can wrap any element. Here it wraps a styled area to create a visually distinct right-click region.

Right-click anywhere in this area

Properties

ContextMenu

Property	Type	Description
open	boolean	The controlled open state of the context menu.
defaultOpen	boolean	The open state when initially rendered.
onOpenChange	(open: boolean) => void	Event handler called when the open state changes.
modal	boolean	The modality of the context menu. Default: true.

ContextMenuTrigger

Property	Type	Description
asChild	boolean	Change the default rendered element for the one passed as a child.
disabled	boolean	When true, prevents the context menu from opening on right-click.
children	React.ReactNode	The element that will become the right-clickable trigger.

ContextMenuContent

Property	Type	Description
className	string	Additional CSS classes for custom styling.
sideOffset	number	The distance in pixels from the trigger. Default: 4.
align	"start" | "center" | "end"	The preferred alignment against the trigger.
loop	boolean	When true, keyboard navigation will loop from the last item to the first and vice versa.

ContextMenuItem

Property	Type	Description
inset	boolean	Adds left padding for alignment with items that have icons.
disabled	boolean	When true, prevents the user from interacting with the item.
onSelect	(event: Event) => void	Event handler called when the item is selected.
className	string	Additional CSS classes for custom styling.

ContextMenuCheckboxItem

Property	Type	Description
checked	boolean | "indeterminate"	The controlled checked state of the item.
onCheckedChange	(checked: boolean) => void	Event handler called when the checked state changes.
disabled	boolean	When true, prevents the user from interacting with the item.
className	string	Additional CSS classes for custom styling.

ContextMenuRadioGroup

Property	Type	Description
value	string	The controlled value of the radio group.
onValueChange	(value: string) => void	Event handler called when the value changes.

ContextMenuRadioItem

Property	Type	Description
value	string	The unique value of the radio item.
disabled	boolean	When true, prevents the user from interacting with the item.
className	string	Additional CSS classes for custom styling.

ContextMenuLabel

Property	Type	Description
inset	boolean	Adds left padding to align the label with inset menu items.
className	string	Additional CSS classes for custom styling.

ContextMenuSeparator

Property	Type	Description
className	string	Additional CSS classes for custom styling.

ContextMenuShortcut

Property	Type	Description
className	string	Additional CSS classes for custom styling.
children	React.ReactNode	The shortcut text displayed on the right side of a menu item (e.g., ⌘N).

ContextMenuSubTrigger

Property	Type	Description
inset	boolean	Adds left padding for alignment with items that have icons.
className	string	Additional CSS classes for custom styling.
children	React.ReactNode	The label for the submenu trigger. A chevron icon is appended automatically.

Accessibility

The ContextMenu component includes comprehensive accessibility features:

• Keyboard Navigation - Arrow keys, Enter, and Escape key support
• Focus Management - Proper focus handling when the menu opens and closes
• Screen Reader Support - ARIA roles and attributes for assistive technologies
• Type-ahead - Users can type characters to jump to matching menu items
• Right-click and Long-press - Works on both desktop and touch devices

Common Use Cases

The ContextMenu component is ideal for:

• File Managers - Actions like open, rename, delete, copy, move
• Canvas / Editor Surfaces - Paste, select all, format options
• Data Tables - Row-level actions like edit, delete, view details
• Image Viewers - Save, copy, share, rotate options
• Code Editors - Refactor, find references, run selection
• Workspace Layouts - Add widget, customize area, reset layout

Best Practices

1. Mirror system conventions - Match actions users expect from OS-level context menus
2. Limit menu depth - Avoid more than two levels of submenus to prevent confusion
3. Use separators - Group related actions with ContextMenuSeparator for clarity
4. Show keyboard shortcuts - Use ContextMenuShortcut to reinforce discoverability
5. Disable unavailable items - Use the disabled prop rather than hiding items
6. Keep labels concise - Short, action-oriented labels reduce cognitive load
7. Avoid destructive actions at the top - Place delete/remove items below safer actions