Context Menu
Displays a menu of actions triggered by a right click.
Installation
CLI
Manual
Examples
Basic
A simple context menu with a few actions.
context-menu-basic
Submenu
Use ContextMenuSub to nest secondary actions.
context-menu-submenu
Shortcuts
Add ContextMenuShortcut to show keyboard hints.
context-menu-shortcuts
Groups
Group related actions and separate them with dividers.
context-menu-groups
Icons
Combine icons with labels for quick scanning.
context-menu-icons
Checkboxes
Use selectionMode="multiple" for toggles.
context-menu-checkboxes
Radio
Use selectionMode="single" for exclusive choices.
context-menu-radio
Destructive
Use variant="destructive" to style the menu item as destructive.
context-menu-destructive
Placement
Control submenu placement with the placement prop.
context-menu-sides
Use placement="end" to place the menu on the logical end side of the trigger.
<ContextMenuTrigger>
<Pressable>
<div role="button">Right click here</div>
</Pressable>
<ContextMenu placement="end">
<ContextMenuItem>Profile</ContextMenuItem>
<ContextMenuItem>Billing</ContextMenuItem>
<ContextMenuItem>Team</ContextMenuItem>
<ContextMenuItem>Subscription</ContextMenuItem>
</ContextMenu>
</ContextMenuTrigger>API Reference
See the React Aria documentation for more information.