Context Menu

Menu triggered by right-clicking a target area. Shares the same item API as Dropdown — use Context Menu for surface-level actions, Dropdown for button-triggered menus.

Anatomy

<ContextMenu>
  <ContextMenuTrigger />            {/* right-click target */}
  <ContextMenuContent>
    <ContextMenuLabel />            {/* section heading */}
    <ContextMenuItem />             {/* action */}
    <ContextMenuCheckboxItem />     {/* toggle item */}
    <ContextMenuRadioGroup>
      <ContextMenuRadioItem />      {/* single-select item */}
    </ContextMenuRadioGroup>
    <ContextMenuSeparator />        {/* divider */}
    <ContextMenuSub>
      <ContextMenuSubTrigger />
      <ContextMenuSubContent>
        <ContextMenuItem />
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>

Examples

Right-click anywhere in this area

With submenu

Right-click anywhere in this area

Props

ContextMenu

children*

ReactNode

Must contain ContextMenuTrigger and ContextMenuContent.

Prop	Type	Default	Description
children*	ReactNode	—	Must contain ContextMenuTrigger and ContextMenuContent.

ContextMenuContent

children*

ReactNode

Menu items, labels, and separators.

className

string

Additional classes on the menu panel.

Prop	Type	Default	Description
children*	ReactNode	—	Menu items, labels, and separators.
className	string	—	Additional classes on the menu panel.

ContextMenuItem

children*

ReactNode

Item label.

onSelect

(event: Event) => void

Called when the item is selected.

icon

ReactNode

Icon rendered before the label.

destructive= false

boolean

Renders the item in error colour.

disabled= false

boolean

Prevents selection.

shortcut

string

Keyboard shortcut hint shown right-aligned, e.g. "⌘K". Decorative only.

description

string

Secondary description line rendered below the label.

className

string

Additional classes.

Prop	Type	Default	Description
children*	ReactNode	—	Item label.
onSelect	(event: Event) => void	—	Called when the item is selected.
icon	ReactNode	—	Icon rendered before the label.
destructive	boolean	false	Renders the item in error colour.
disabled	boolean	false	Prevents selection.
shortcut	string	—	Keyboard shortcut hint shown right-aligned, e.g. "⌘K". Decorative only.
description	string	—	Secondary description line rendered below the label.
className	string	—	Additional classes.

ContextMenuCheckboxItem

checked

boolean

Whether the item is checked.

onCheckedChange

(checked: boolean) => void

Called when the checked state changes.

disabled

boolean

Prevents interaction.

shortcut

string

Keyboard shortcut hint shown right-aligned.

Prop	Type	Default	Description
checked	boolean	—	Whether the item is checked.
onCheckedChange	(checked: boolean) => void	—	Called when the checked state changes.
disabled	boolean	—	Prevents interaction.
shortcut	string	—	Keyboard shortcut hint shown right-aligned.

ContextMenuRadioItem

Wrap in ContextMenuRadioGroup with a value and onValueChange prop.

value*

string

The value this item represents within a ContextMenuRadioGroup.

disabled

boolean

Prevents interaction.

shortcut

string

Keyboard shortcut hint shown right-aligned.

Prop	Type	Default	Description
value*	string	—	The value this item represents within a ContextMenuRadioGroup.
disabled	boolean	—	Prevents interaction.
shortcut	string	—	Keyboard shortcut hint shown right-aligned.

PreviousCommand NextDialog