Context Menu

Right-click menu for contextual actions and shortcuts.

Installation

Props

ContextMenu

Root provider that coordinates open state and the shared motion shell used by the trigger, content, and item primitives.

childrenReactNode

Required

Compose ContextMenuTrigger, ContextMenuContent, and item primitives such as ContextMenuItem or ContextMenuSub inside the root.

openboolean

Controlled open state for the menu surface. Supported on the Base UI install.

defaultOpenboolean

Default false

Initial open state for uncontrolled usage on the Base UI install.

onOpenChange(open: boolean) => void

Called whenever the trigger, outside interaction, or Escape key changes the open state.

Compose ContextMenuTrigger, ContextMenuContent, and item primitives inside the root.

Current install target: Radix UI.

Dependencies declared by this registry entry: @radix-ui/react-context-menu, motion, lucide-react.

Installs the Radix context-menu primitive under the same composable ContextMenu API used by the Base UI build.

Radix handles focus, dismissal, and pointer anchoring while the menu shell keeps the original Iconiq motion treatment.

The generated registry file is /r/r-context-menu.json.

ContextMenuTrigger

Interactive surface that opens the menu on right click, long press, or keyboard context-menu shortcuts.

childrenReactNode

Required

Trigger content rendered inside the context-click target.

asChildboolean

Merges trigger behavior onto the single child element instead of rendering a wrapper element.

classNamestring

Merged onto the trigger surface, including the focus ring and theme token scope.

ContextMenuContent

Portaled menu panel that renders the composed item tree with the Iconiq border, shadow, and motion treatment.

childrenReactNode

Required

Menu body content such as groups, items, separators, checkbox rows, and nested submenus.

classNamestring

Merged onto the animated panel shell. Use width utilities such as w-48 when you want a fixed menu width.

collisionPaddingnumber

Default 8

Viewport padding used while the underlying primitive resolves collision-aware placement.

ContextMenuItem

Interactive menu row with the Iconiq active highlight, row entrance motion, and optional destructive styling.

childrenReactNode

Required

Row content. Pair with ContextMenuShortcut when you want trailing keyboard hints.

variant"default" | "destructive"

Default default

Switches the row into the destructive color treatment used for irreversible actions.

disabledboolean

Dims the row and blocks pointer and keyboard selection.

insetboolean

Adds extra start padding so the row aligns with checkbox and radio items.

onSelect(event: Event) => void

Called when the row is activated.

ContextMenuShortcut

Trailing helper text for keyboard hints. It stays muted until the parent row is focused.

childrenReactNode

Required

Shortcut copy such as ⌘R or Del.

classNamestring

Merged onto the trailing shortcut span.

ContextMenuSub

Nested submenu root. Pair ContextMenuSubTrigger with ContextMenuSubContent to build secondary menus such as More Tools.

childrenReactNode

Required

Submenu trigger and content parts rendered inside the parent menu.

ContextMenuCheckboxItem

Toggle row with a trailing check indicator and the same Iconiq row motion treatment as ContextMenuItem.

checkedboolean

Controls whether the row renders in the checked state.

onCheckedChange(checked: boolean) => void

Called when the row toggles between checked and unchecked.

disabledboolean

Dims the row and blocks pointer and keyboard selection.

insetboolean

Adds extra start padding to align with sibling rows.

ContextMenuRadioGroup

Single-select group for ContextMenuRadioItem rows. Use ContextMenuLabel above the options when you need a section heading.

valuestring

Controlled selected value for the radio group.

onValueChange(value: string) => void

Called when a radio row is selected.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-context-menu, motion, lucide-react.

Installs the Radix context-menu primitive under the same composable ContextMenu API used by the Base UI build.

Radix handles focus, dismissal, and pointer anchoring while the menu shell keeps the original Iconiq motion treatment.

The generated registry file is /r/r-context-menu.json.