Context Menu

Right-click menu for contextual actions and shortcuts.

Installation

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Props

ContextMenu

5 props

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

Defaultfalse

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.

reducedMotionboolean

Forces reduced motion for this menu instance, overriding the user system preference.

Notes

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

3 props

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

3 props

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

Default8

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

ContextMenuItem

5 props

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"

Defaultdefault

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

2 props

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

1 prop

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

4 props

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

2 props

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.