Context Menu
A menu of actions for an item that opens where the pointer right-clicks.
Basic usage
Wrap the target in ContextMenu.Trigger asChild; right-clicking it or long-pressing
it on a touch screen opens the menu at the pointer. Items take the same start, end, destructive, and
href props as Dropdown Menu items. An item with href
renders as a link, so it supports opening in a new tab.
Right-clicking is hard to discover and unavailable to many keyboard users, so offer the same actions somewhere visible too, usually an ellipsis dropdown on the same card or row.
Labels, shortcuts, and submenus
Give each row its own ContextMenu.Root so the menu knows which item it acts on;
the trigger gets data-state="open" while its menu is open, which you can use to
highlight the row. ContextMenu.Label names a section, ContextMenu.Shortcut
shows a key hint at the end of an item, and ContextMenu.Sub nests a submenu
that opens on hover or with the right arrow key.
A disabled item with disabledReason stays hoverable and shows the reason in a
tooltip, so people learn why the action isn't available.
Usage
ContextMenu.Trigger asChild needs a child that forwards its ref and props, such
as a div. When the target is a link or a clickable row, stop the menu's click
and key events from reaching it with onClick and onKeyDown on
ContextMenu.Content.
ContextMenu.Root Properties
Called when the menu opens or closes
Blocks interaction outside the menu while it is open
Default: true
Reading direction, which also sets which side submenus open on
ContextMenu.Trigger Properties
Uses the child element as the right-click target instead of a wrapping span
Default: false
Lets the browser's own context menu open instead
Default: false
ContextMenu.Content Properties
Minimum width in pixels
Default: 249
Offset from the pointer along the alignment axis
Default: 0
Space to keep from the viewport edges
Default: 0
Called when focus returns to the trigger after closing. Call preventDefault to keep focus elsewhere
Classes for the menu surface
ContextMenu.Item Properties
Icon or element before the label
Icon or element after the label, aligned to the end
Shows the item in red for actions that remove data
Default: false
Renders the item as a link
Link target, such as _blank
Link relationship. Use noopener noreferrer with target _blank
Called when the item is chosen. Call preventDefault to keep the menu open
Dims the item and prevents choosing it
Default: false
Tooltip explaining why a disabled item is unavailable. Keeps the item hoverable
ContextMenu.Label Properties
Height and text size of the section label
Default: medium
ContextMenu.Sub Properties
Controlled open state of the submenu
Called when the submenu opens or closes
ContextMenu.SubTrigger Properties
Icon or element before the label. A chevron is always shown at the end
Dims the trigger and prevents opening the submenu
Default: false
ContextMenu.SubContent Properties
Minimum width in pixels
Default: 249
Distance from the parent menu in pixels
Default: 8
Vertical offset from the submenu trigger
Default: -4
Content fixed below the submenu's scrolling items, such as a create action
Other Parts
Divider line between groups of items
Key hint placed inside an item, after its label
Groups related items without adding visible chrome
Radix portal. Content and SubContent already render in one