Menus/Context Menu

Context Menu

Displays a menu at the pointer position on right-click.

Themed

When to Use

Use Context Menu when you need to:

Provide secondary actions on right-click without cluttering the UI
Offer contextual operations specific to the element being clicked
Replicate native OS context menu patterns (e.g., file management, text editing)
Support power-user workflows with keyboard shortcuts displayed inline
Group related actions with separators, submenus, and labels

When Not to Use

Primary actions that must be discoverable - use Button or visible controls
Click-triggered menus - use Dropdown Menu instead
Search and command palettes - use Command for filterable lists
Persistent menu bars - use Menubar for always-visible menus

Full Featured

Context menu with shortcuts, submenus, checkboxes, and radio items.

Right click here

With Icons

Basic context menu with leading icons and a destructive action.

Right click here

UX & Design Guidelines

Discoverability

Context menus are hidden by default; users must know to right-click. Never put primary or essential actions exclusively in a context menu. Pair context menu actions with visible UI controls (toolbars, buttons) so all users can discover functionality. Consider adding a subtle hint like border-dashed on trigger areas to signal interactivity.

Menu Organization

Group related actions using ContextMenuSeparator and ContextMenuLabel. Place the most common actions at the top. Keep menus concise - limit to 7-10 items per level. Use submenus sparingly and avoid nesting deeper than two levels. Place destructive actions at the bottom, visually separated.

Shortcuts & Labels

Display keyboard shortcuts with ContextMenuShortcut to help users learn accelerators. Use concise, action-oriented labels (e.g., "Copy" not "Copy this item to clipboard"). Use inset on items without icons to align text with items that have checkboxes or radio indicators.

Color & Contrast

The menu uses bg-popover with text-popover-foreground for the content container. Focus states use bg-accent and text-accent-foreground. Destructive items use text-destructive to clearly signal irreversible actions. Disabled items reduce opacity to 50%.

Accessibility

Keyboard Navigation

Arrow Down / Arrow Up — Move focus between menu items
Arrow Right — Open a submenu when focused on a sub trigger
Arrow Left — Close a submenu and return focus to parent
Enter or Space — Activate the focused menu item
Escape — Close the context menu and return focus to the trigger

Screen Reader Support

Menu items are announced with their label and role automatically
Checkbox items announce their checked/unchecked state
Radio items announce the selected value within the group
Disabled items are announced as aria-disabled
Submenus announce their expanded/collapsed state

Focus Management

Focus is trapped within the open menu. When the menu opens, focus moves to the first item automatically. Closing the menu returns focus to the trigger element. Submenu navigation preserves focus context so users can navigate back seamlessly.

Type-Ahead Selection

Users can type characters to jump to matching menu items. This works across all item types (standard, checkbox, radio) for quick navigation in long menus without needing to arrow through every item.

ARIA Attributes

{/* Basic context menu with accessible trigger */}
<ContextMenu>
  <ContextMenuTrigger aria-label="Options for this item">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuItem>Duplicate</ContextMenuItem>
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

{/* Disabled items are announced to screen readers */}
<ContextMenuItem disabled>
  Forward
  <ContextMenuShortcut>⌘]</ContextMenuShortcut>
</ContextMenuItem>

{/* Checkbox items announce their checked state */}
<ContextMenuCheckboxItem checked>
  Show Bookmarks
</ContextMenuCheckboxItem>

{/* Radio items announce their selected state */}
<ContextMenuRadioGroup value="light">
  <ContextMenuLabel>Theme</ContextMenuLabel>
  <ContextMenuRadioItem value="light">Light</ContextMenuRadioItem>
  <ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
</ContextMenuRadioGroup>

API Reference

The Context Menu is a compound component built from multiple parts. Below are the key sub-components and their props.

ContextMenuContent

Container for menu items. Rendered inside a portal for proper stacking.

Prop	Type	Default	Description
alignOffset	`number`	0	Horizontal offset from alignment edge.
sideOffset	`number`	0	Vertical offset from the trigger.
onCloseAutoFocus	`(event: Event) => void`	—	Callback when focus returns after the menu closes.
className	`string`	—	Additional CSS classes to apply to the content container.

ContextMenuItem

Individual clickable menu item with optional destructive variant.

Prop	Type	Default	Description
variant	`"default" \| "destructive"`	"default"	Visual variant of the item. Destructive items use text-destructive color.
inset	`boolean`	false	Add left padding to align with checkbox/radio items.
disabled	`boolean`	false	When true, prevents user interaction and applies disabled styles (50% opacity).
onSelect	`(event: Event) => void`	—	Callback when the item is selected via click or keyboard.
className	`string`	—	Additional CSS classes to apply to the item.

ContextMenuCheckboxItem

Toggleable checkbox menu item with check indicator.

Prop	Type	Default	Description
checked	`boolean`	false	Whether the checkbox is checked.
onCheckedChange	`(checked: boolean) => void`	—	Callback when the checked state changes.
disabled	`boolean`	false	When true, prevents user interaction and applies disabled styles.
className	`string`	—	Additional CSS classes to apply to the checkbox item.

ContextMenuRadioGroup

Container for radio items where only one can be selected.

Prop	Type	Default	Description
value	`string`	—	The value of the currently selected radio item.
onValueChange	`(value: string) => void`	—	Callback when the selected radio item changes.

ContextMenuSubTrigger

Item that opens a nested submenu on hover or keyboard navigation.

Prop	Type	Default	Description
inset	`boolean`	false	Add left padding to align with checkbox/radio items.
className	`string`	—	Additional CSS classes to apply to the sub trigger.