ContextMenu

An unstyled, accessible context menu component with compound composition for right-click actions.

Build fully custom right-click menus with complete control over layout and styling.

Right Click Here

basic-demo

Pre-styled Versions

Choose a pre-styled library to use ContextMenu with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Trigger, Portal, Positioner, Popup, Arrow, List, Item, Sub, SubTrigger, SubPortal, SubPositioner, SubPopup, Indicator, Label, Separator, RadioGroup
Right-click activation with automatic cursor-based popup positioning
Global mode to attach context menu to the entire document
Nested submenus with open/close coordination
Checkbox and radio item types with indicator matching
Built-in character search to jump to items by typing

Usage#

import { ContextMenu } from 'primereact/contextmenu';

<ContextMenu.Root>
    <ContextMenu.Trigger></ContextMenu.Trigger>
    <ContextMenu.Portal>
        <ContextMenu.Positioner>
            <ContextMenu.Popup>
                <ContextMenu.Arrow />
                <ContextMenu.List>
                    <ContextMenu.Label></ContextMenu.Label>
                    <ContextMenu.Item></ContextMenu.Item>
                    <ContextMenu.Separator />
                    <ContextMenu.Submenu>
                        <ContextMenu.SubmenuTrigger>
                            <ContextMenu.Indicator />
                        </ContextMenu.SubmenuTrigger>
                        <ContextMenu.SubmenuPortal>
                            <ContextMenu.SubmenuPositioner>
                                <ContextMenu.SubmenuPopup>
                                    <ContextMenu.List>
                                        <ContextMenu.Item></ContextMenu.Item>
                                    </ContextMenu.List>
                                </ContextMenu.SubmenuPopup>
                            </ContextMenu.SubmenuPositioner>
                        </ContextMenu.SubmenuPortal>
                    </ContextMenu.Submenu>
                </ContextMenu.List>
            </ContextMenu.Popup>
        </ContextMenu.Positioner>
    </ContextMenu.Portal>
</ContextMenu.Root>

Behavior#

Checkbox Items#

Set type="checkbox" on ContextMenu.Item to create a toggleable item. Use ContextMenu.Indicator with match="checked" to display a checkmark when the item is active.

<ContextMenu.Item type="checkbox" defaultChecked={true}>
    <ContextMenu.Indicator match="checked">
        <Check />
    </ContextMenu.Indicator>
    Enable Notifications
</ContextMenu.Item>

Radio Items#

Wrap ContextMenu.Item elements with type="radio" inside a ContextMenu.RadioGroup. Use ContextMenu.Indicator with match="checked" to display a dot or icon for the selected option.

<ContextMenu.RadioGroup defaultValue="light">
    <ContextMenu.Item type="radio" value="light">
        <ContextMenu.Indicator match="checked">
            <Dot />
        </ContextMenu.Indicator>
        Light Mode
    </ContextMenu.Item>
    <ContextMenu.Item type="radio" value="dark">
        <ContextMenu.Indicator match="checked">
            <Dot />
        </ContextMenu.Indicator>
        Dark Mode
    </ContextMenu.Item>
</ContextMenu.RadioGroup>

Motion Animation#

<ContextMenu.Popup motionProps={{ name: 'p-anchored-overlay' }}></ContextMenu.Popup>

See Motion for animation phases, CSS variables, and hide strategies.

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<ContextMenu.Item as="a" href="/dashboard">
    Dashboard
</ContextMenu.Item>

Default elements: Root=div, Trigger=div, List=ul, Item=li, Sub=li, SubTrigger=div, SubPositioner=div, SubPopup=div, Label=li, Separator=li, Indicator=span, Popup=div, Positioner=div, Arrow=div, RadioGroup=div, Portal=portal, SubPortal=portal.

Render Function Children#

Item and SubTrigger accept a render function as children, providing access to the component instance.

<ContextMenu.Item>{(instance) => <span>{instance.focused ? 'Focused' : 'Idle'}</span>}</ContextMenu.Item>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Pass Through Sections

Hover or click to explore component parts

/* Select a part to see its CSS selector for custom styling */

API#

ContextMenuRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`global`	`boolean`	`false`
Attaches the menu to document instead of a particular element.
`open`	`boolean`	—
Controlled open state of the menu.
`defaultOpen`	`boolean`	`false`
Default open state for uncontrolled mode.
`appendTo`	`"body"` \| `HTMLElement` \| `"self"`	`'body'`
The element to which the overlay is appended.
`baseZIndex`	`number`	`0`
Base zIndex value to use in layering.
`autoZIndex`	`boolean`	`true`
Whether to automatically manage layering.
`tabIndex`	`number`	`0`
Index of the element in tabbing order.
`openDelay`	`number`	`100`
The delay in milliseconds before opening the menu when hovering the trigger. Only applies when `openOnHover` is true.
`closeDelay`	`number`	`0`
The delay in milliseconds before closing the menu when the pointer leaves the trigger. Only applies when `openOnHover` is true.
`openOnHover`	`boolean`	`false`
When true, the menu opens on pointer hover over the trigger (in addition to click).
`context`	`useMenuSubmenuExposes`	—
Optional parent submenu context whose popover state should drive this menu. When provided, useMenu reuses the parent submenu's popover (anchor, open state, positioner) instead of creating its own. Forwarded by Menu.Root automatically when nested inside a Menu.Submenu.
`navigationmenu`	`useNavigationMenuExposes`	—
Optional parent NavigationMenu context. When provided, ArrowRight / ArrowLeft pressed on a list item that is not a submenu trigger will move focus to the next / previous sibling navigationmenu trigger (WAI-ARIA NavigationMenu pattern). Forwarded by Menu.Root when nested inside a `NavigationMenu` .
`navigationmenuMenuId`	`string`	—
The id this menu is registered under in the parent NavigationMenu's trigger registry. Required for `navigationmenu` sibling navigation to know which trigger is "current".
`onOpenChange`	`(event: ContextMenuRootChangeEvent) => void`	—
Callback function that is called when the trigger is clicked.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"root"`

Defines passthrough(pt) options of ContextMenu component.

label	type	description
root	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
list	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the list's DOM element.
item	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the item's DOM element.
label	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the label's DOM element.
sub	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the submenu's DOM element.
trigger	MenuRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the trigger's DOM element.
subtrigger	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the subtrigger's DOM element.
checkboxItemIndicator	MenuRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the checkbox item indicator's DOM element.
radioItemIndicator	MenuRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the radio item indicator's DOM element.
submenuIndicator	MenuRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the submenu indicator's DOM element.
separator	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the separator's DOM element.
popup	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the popup's DOM element.
arrow	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the arrow's DOM element.
positioner	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the positioner's DOM element.
subpositioner	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the subpositioner's DOM element.
subpopup	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the subpopup's DOM element.
subportal	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the subportal's DOM element.

ContextMenuTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuTriggerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"trigger"`

Defines passthrough(pt) options of ContextMenuTrigger component.

label	type	description
root	ContextMenuTriggerPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuList#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuListInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuListInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuListInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuListPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuListInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"list"`

Defines passthrough(pt) options of ContextMenuList component.

label	type	description
root	MenuListPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
content	MenuListPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.

ContextMenuItem#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuItemInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuItemInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuItemInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuItemPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuItemInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`disabled`	`boolean`	—
When present, it specifies that the item should be disabled.
`value`	`string`	—
Semantic value that uniquely identifies this item within the menu. Used to generate a deterministic DOM id. When not provided, auto-generated.
`closeOnSelect`	`boolean`	`true`
Whether the menu should close when this item is activated. Overrides the `closeOnSelect` setting on `ContextMenu.Root` for this item only.
`onSelect`	`(event: MenuItemSelectEvent) => void`	—
Callback fired when the item is activated (click or keyboard). Calling `event.preventDefault()` keeps the menu open regardless of `closeOnSelect` .
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"item"`
`data-value`	The item value
`data-focused`	Present when item is focused
`data-disabled`	Present when item is disabled
`data-checked`	Present when item is checked

Defines passthrough(pt) options of ContextMenuItem component.

label	type	description
root	ContextMenuItemPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuSubmenu#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuSubmenuInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuSubmenuInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuSubmenuInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuSubmenuPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuSubmenuInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string`	—
Semantic value identifying this submenu.
`disabled`	`boolean`	`false`
Whether the submenu is disabled.
`onOpenChange`	`(event: ContextMenuSubmenuOpenChangeEvent) => void`	—
Callback fired when the submenu's open state changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"sub"`
`data-open`	Present when submenu is open

Defines passthrough(pt) options of ContextMenuSubmenu component.

label	type	description
root	MenuSubmenuPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuSubmenuTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuSubmenuTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuSubmenuTriggerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuSubmenuTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuSubmenuTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuSubmenuTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"subtrigger"`
`data-value`	The subtrigger value
`data-focused`	Present when subtrigger is focused
`data-disabled`	Present when subtrigger is disabled
`data-open`	Present when submenu is open

Defines passthrough(pt) options of ContextMenuSubmenuTrigger component.

label	type	description
root	MenuSubmenuTriggerPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuSubmenuPositioner#

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"subpositioner"`

CSS Custom Properties

The positioner element exposes CSS custom properties for layout and transform control.

CSS Variable	Description
`--available-height`	Available vertical space in pixels
`--available-width`	Available horizontal space in pixels
`--transform-origin`	Computed transform origin for animations
`--positioner-anchor-width`	Width of the anchor/trigger element

ContextMenuSubmenuPortal#

ContextMenuSubmenuPopup#

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"subpopup"`

ContextMenuIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`match`	`"checked"` \| `"unchecked"` \| `"open"` \| `"closed"`	—
Determines which state the indicator should match to render its content.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"indicator"`
`data-open`	Present when submenu is open
`data-closed`	Present when submenu is closed
`data-checked`	Present when item is checked
`data-unchecked`	Present when item is unchecked

Defines passthrough(pt) options of ContextMenuIndicator component.

label	type	description
root	MenuIndicatorPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

ContextMenuLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuLabelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuLabelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuLabelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"label"`

Defines passthrough(pt) options of ContextMenuLabel component.

label	type	description
root	MenuLabelPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuSeparator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuSeparatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuSeparatorInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuSeparatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuSeparatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuSeparatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"separator"`

Defines passthrough(pt) options of ContextMenuSeparator component.

label	type	description
root	MenuSeparatorPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuRadioGroup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuRadioGroupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuRadioGroupInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuRadioGroupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuRadioGroupPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuRadioGroupInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`unknown`	—
Value of the selected radio item.
`defaultValue`	`unknown`	—
Default value of the selected radio item.
`name`	`string`	—
Name for the radio group.
`onValueChange`	`(event: ContextMenuRadioGroupValueChangeEvent) => void`	—
Callback to invoke when value changes.
`[key: string]`	`any`	—

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"radiogroup"`

ContextMenuPopup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuPopupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuPopupInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuPopupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuPopupPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuPopupInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`motionProps`	`useMotionProps`	—
Motion properties for the popup animation.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"popup"`

Defines passthrough(pt) options of ContextMenuPopup component.

label	type	description
root	MenuPopupPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuPositioner#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuPositionerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuPositionerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuPositionerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuPositionerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuPositionerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`side`	`SideType`	—
The side of the positioner.
`align`	`AlignType`	—
The align of the positioner.
`sideOffset`	`number`	—
The side offset of the positioner.
`alignOffset`	`number`	—
The align offset of the positioner.
`flip`	`boolean`	—
Whether to flip the positioner.
`shift`	`boolean`	—
Whether to shift the positioner.
`hideWhenDetached`	`boolean`	—
Whether to hide the positioner when detached.
`strategy`	`"fixed"` \| `"absolute"`	`'fixed'`
The positioning strategy.
`boundary`	`HTMLElement`	—
The boundary element that constrains the positioner placement. Used in JS fallback mode only; CSS Anchor mode uses the containing block.
`anchor`	`HTMLElement`	—
The anchor element.
`content`	`HTMLDivElement`	—
The content element.
`arrow`	`HTMLDivElement`	—
The arrow element.
`autoZIndex`	`boolean`	`true`
Whether to automatically manage layering.
`baseZIndex`	`number`	`0`
Base zIndex value to use in layering.
`onPlacementChange`	`(placement: { side: SideType; align: AlignType }) => void`	—
Callback invoked when the actual placement changes due to flip or shift.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"positioner"`

CSS Custom Properties

The positioner element exposes CSS custom properties for layout and transform control.

CSS Variable	Description
`--available-height`	Available vertical space in pixels
`--available-width`	Available horizontal space in pixels
`--transform-origin`	Computed transform origin for animations
`--positioner-anchor-width`	Width of the anchor/trigger element

Defines passthrough(pt) options of ContextMenuPositioner component.

label	type	description
root	MenuPositionerPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuArrow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ContextMenuArrowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ContextMenuArrowInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ContextMenuArrowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ContextMenuArrowPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ContextMenuArrowInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"contextmenu"`
`data-part`	`"arrow"`

CSS Custom Properties

The arrow element exposes CSS custom properties for dynamic positioning:

CSS Variable	Description
`--placer-arrow-x`	Horizontal offset of arrow
`--placer-arrow-y`	Vertical offset of arrow
`--placer-arrow-left`	Left position of arrow element
`--placer-arrow-top`	Top position of arrow element

Defines passthrough(pt) options of ContextMenuArrow component.

label	type	description
root	MenuArrowPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuPortal#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`(CSSProperties` \| `((instance?: PortalInstance) => CSSProperties)) & (CSSProperties` \| `((instance?: ContextMenuPortalInstance) => CSSProperties))`	—
The style to apply to the component.
`className`	`(string` \| `((instance?: PortalInstance) => string)) & (string` \| `((instance?: ContextMenuPortalInstance) => string))`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BaseInstance<SafeRecord<PortalProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<PortalProps>>; attrs: Omit<SafeRecord<SafeRecord<PortalProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & PortalExposes & Record<PropertyKey, unknown> & useComponentPTReturnType & useComponentStyleReturnType & BaseInstance<SafeRecord<ContextMenuPortalProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<ContextMenuPortalProps>>; attrs: Omit<SafeRecord<SafeRecord<ContextMenuPortalProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & ContextMenuPortalExposes`	—
The instance to pass to the component.
`pt`	`PortalPassThrough & Record<PropertyKey, unknown> & ContextMenuPortalPassThrough`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: PortalInstance) => ReactNode & (instance: ContextMenuPortalInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`onMounted`	`() => void`	—
Callback function to invoke when the portal is mounted.
`onUnmounted`	`() => void`	—
Callback function to invoke when the portal is unmounted.
`element`	`HTMLElement` \| `ReactNode`	—
The element to be rendered as the portal.
`elementRef`	`RefObject<HTMLElement>`	—
The element reference to be rendered as the portal.
`appendTo`	`string` \| `HTMLElement` \| `((instance: PortalInstance) => HTMLElement)`	`'body'`
The DOM element where the portal should be appended to.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ContextMenuPortal component.

label	type	description
root	MenuPortalPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuCheckboxItem#

Defines passthrough(pt) options of ContextMenuCheckboxItem component.

label	type	description
root	ContextMenuCheckboxItemPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuRadioItem#

Defines passthrough(pt) options of ContextMenuRadioItem component.

label	type	description
root	ContextMenuRadioItemPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ContextMenuIcon#

ContextMenuCheckboxIcon#

ContextMenuRadioIcon#

Accessibility#

ContextMenu component uses the menu role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. Checkbox items use menuitemcheckbox and radio items use menuitemradio roles with aria-checked to indicate selection state.

The component implicitly manages the aria-expanded, aria-haspopup and aria-controls attributes of the trigger element to define the relation between the trigger and the popup.

Keyboard Support#

Key	Function
`tab`	Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.
`shift + tab`	Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.
`enter`	Activates the focused menuitem. Popup closes and focus moves to target.
`space`	Activates the focused menuitem. Popup closes and focus moves to target.
`escape`	Closes the popup and focus moves to target.
`down arrow`	Moves focus to the next menuitem.
`up arrow`	Moves focus to the previous menuitem.
`right arrow`	Opens submenu if focused item has one. Moves focus to the first item of the submenu.
`left arrow`	Closes current submenu and moves focus to parent submenu trigger.
`alt + up arrow`	Closes the popup and focus moves to the target.
`home`	Moves focus to the first menuitem.
`end`	Moves focus to the last menuitem.

ContextMenu

Pre-styled Versions

Features#

Usage#

Behavior#

Checkbox Items#

Radio Items#

Motion Animation#

Polymorphic Rendering#

Render Function Children#

Pass Through#

API#

ContextMenuRoot#

ContextMenuTrigger#

ContextMenuList#

ContextMenuItem#

ContextMenuSubmenu#

ContextMenuSubmenuTrigger#

ContextMenuSubmenuPositioner#

ContextMenuSubmenuPortal#

ContextMenuSubmenuPopup#

ContextMenuIndicator#

ContextMenuLabel#

ContextMenuSeparator#

ContextMenuRadioGroup#

ContextMenuPopup#

ContextMenuPositioner#

ContextMenuArrow#

ContextMenuPortal#

ContextMenuCheckboxItem#

ContextMenuRadioItem#

ContextMenuIcon#

ContextMenuCheckboxIcon#

ContextMenuRadioIcon#

Accessibility#

Screen Reader#

Keyboard Support#