Compound component API with sub-components: Root, List, Item, CheckboxItem, RadioItemGroup, RadioItem, Sub, SubTrigger, Indicator, Label, Separator, Trigger, Portal, Positioner, Popup, Arrow. Submenus reuse Portal/Positioner/Popup inside Menu.Submenu; the same components automatically detect the sub context.
Inline and portal-based popup rendering modes
Nested submenus with open/close coordination
Checkbox and radio item types with indicator matching
Built-in character search to jump to items by typing
Composite mode for complex nested menus with hover-to-open behavior

Usage#

import { Menu } from 'primereact/menu';

<Menu.Root>
    <Menu.Trigger />
    <Menu.Portal>
        <Menu.Positioner>
            <Menu.Popup>
                <Menu.List>
                    <Menu.Item />
                    <Menu.Submenu>
                        <Menu.SubmenuTrigger>
                            <Menu.Indicator />
                        </Menu.SubmenuTrigger>
                        <Menu.Portal>
                            <Menu.Positioner>
                                <Menu.Popup>
                                    <Menu.List>
                                        <Menu.Item />
                                        <Menu.Item />
                                    </Menu.List>
                                </Menu.Popup>
                            </Menu.Positioner>
                        </Menu.Portal>
                    </Menu.Submenu>
                </Menu.List>
            </Menu.Popup>
        </Menu.Positioner>
    </Menu.Portal>
</Menu.Root>

Behavior#

Checkbox Items#

Use Menu.CheckboxItem to create a toggleable item managed by useCheckbox. Use Menu.Indicator with match="checked" to display a checkmark when the item is active.

<Menu.CheckboxItem defaultChecked={true}>
    <Menu.Indicator match="checked">
        <Check />
    </Menu.Indicator>
    Enable Notifications
</Menu.CheckboxItem>

Radio Items#

Wrap Menu.RadioItem elements inside a Menu.RadioItemGroup. The group is managed by useRadioButtonGroup and each item by useRadioButton. Use Menu.Indicator with match="checked" to display a dot or icon for the selected option.

<Menu.RadioItemGroup defaultValue="light">
    <Menu.RadioItem value="light">
        <Menu.Indicator match="checked">
            <Dot />
        </Menu.Indicator>
        Light Mode
    </Menu.RadioItem>
    <Menu.RadioItem value="dark">
        <Menu.Indicator match="checked">
            <Dot />
        </Menu.Indicator>
        Dark Mode
    </Menu.RadioItem>
</Menu.RadioItemGroup>

Motion Animation#

<Menu.Popup motionProps={{ name: 'p-popover' }}></Menu.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.

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

Default elements: Root=div, List=ul, Item=li, CheckboxItem=li, RadioItem=li, Sub=li, SubTrigger=div, Trigger=button, Label=li, Separator=li, Indicator=span, Popup=div, Positioner=div, Arrow=div, RadioItemGroup=div, Portal=portal.

Render Function Children#

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

<Menu.Item>{(instance) => <span>{instance.focused ? 'Focused' : 'Idle'}</span>}</Menu.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#

MenuRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuRootInstance) => 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`	`MenuRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuRootPassThrough>`	—
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: MenuRootInstance) => 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.
`open`	`boolean`	—
Controlled open state of the menu.
`defaultOpen`	`boolean`	`false`
Default open state for uncontrolled mode.
`composite`	`boolean`	`false`
Whether the menu is in composite mode (navigationmenu). In composite mode, submenus open on hover and focusedOptionId is an array tracking the focus path.
`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".
`closeOnSelect`	`boolean`	`true`
Whether the menu should close when an item is activated. Item-level `closeOnSelect` always overrides this default.
`onSelect`	`(event: MenuItemSelectEvent) => void`	—
Callback fired when any item inside the menu is activated (clicked or triggered with keyboard). Calling `event.preventDefault()` keeps the menu open regardless of `closeOnSelect` .
`onOpenChange`	`(event: MenuRootOpenChangeEvent) => void`	—
Callback fired when the menu'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`	`"menu"`
`data-part`	`"root"`

Defines passthrough(pt) options of Menu 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.

MenuTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuTriggerInstance) => 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`	`MenuTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuTriggerPassThrough>`	—
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: MenuTriggerInstance) => 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`	`"menu"`
`data-part`	`"trigger"`
`data-open`	Present when menu is open

Defines passthrough(pt) options of MenuTrigger component.

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

MenuList#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuListInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuListInstance) => 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`	`MenuListInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuListPassThrough>`	—
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: MenuListInstance) => 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`	`"menu"`
`data-part`	`"list"`

Defines passthrough(pt) options of MenuList 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.

MenuItem#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuItemInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuItemInstance) => 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`	`MenuItemInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuItemPassThrough>`	—
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: MenuItemInstance) => 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 `Menu.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`	`"menu"`
`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 MenuItem component.

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

MenuSubmenu#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuSubmenuInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuSubmenuInstance) => 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`	`MenuSubmenuInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuSubmenuPassThrough>`	—
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: MenuSubmenuInstance) => 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.
`open`	`boolean`	—
Controlled open state of the submenu.
`defaultOpen`	`boolean`	`false`
Default open state for uncontrolled mode.
`openDelay`	`number`	`100`
The delay in milliseconds before opening the submenu when hovering the subtrigger. Only applies when `openOnHover` is true.
`closeDelay`	`number`	`0`
The delay in milliseconds before closing the submenu when the pointer leaves the subtrigger. Only applies when `openOnHover` is true.
`openOnHover`	`boolean`	`true`
When true, the submenu opens on pointer hover over the subtrigger.
`disabled`	`boolean`	`false`
Whether the submenu is disabled.
`onOpenChange`	`(event: MenuSubmenuOpenChangeEvent) => 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`	`"menu"`
`data-part`	`"sub"`
`data-open`	Present when submenu is open

Defines passthrough(pt) options of MenuSubmenu component.

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

MenuSubmenuTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuSubmenuTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuSubmenuTriggerInstance) => 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`	`MenuSubmenuTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuSubmenuTriggerPassThrough>`	—
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: MenuSubmenuTriggerInstance) => 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 that uniquely identifies this submenu trigger within the outer menu. Used to generate a deterministic DOM id; auto-generated when not provided.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"menu"`
`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 MenuSubmenuTrigger component.

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

MenuIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuIndicatorInstance) => 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`	`MenuIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuIndicatorPassThrough>`	—
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: MenuIndicatorInstance) => 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 the visibility of the indicator based on the state of the parent menu element. Valid values are: - "open": Indicator is visible when the submenu is expanded. - "closed": Indicator is visible when the submenu is collapsed. - "checked": Indicator is visible when the checkbox/radio item is checked. - "unchecked": Indicator is visible when the checkbox/radio item is unchecked.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"menu"`
`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 MenuIndicator component.

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

MenuLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuLabelInstance) => 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`	`MenuLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuLabelPassThrough>`	—
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: MenuLabelInstance) => 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`	`"menu"`
`data-part`	`"label"`

Defines passthrough(pt) options of MenuLabel component.

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

MenuSeparator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuSeparatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuSeparatorInstance) => 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`	`MenuSeparatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuSeparatorPassThrough>`	—
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: MenuSeparatorInstance) => 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`	`"menu"`
`data-part`	`"separator"`

Defines passthrough(pt) options of MenuSeparator component.

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

MenuCheckboxItem#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuCheckboxItemInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuCheckboxItemInstance) => 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`	`MenuCheckboxItemInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuCheckboxItemPassThrough>`	—
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: MenuCheckboxItemInstance) => 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.
`checked`	`boolean`	—
When present, it specifies the input's checked state.
`defaultChecked`	`boolean`	—
The default value for the input when not controlled by `checked` and `onCheckedChange` .
`inputId`	`string`	—
Identifier of the underlying input element.
`indeterminate`	`boolean`	`false`
When present, it specifies input state as indeterminate.
`trueValue`	`string` \| `number` \| `boolean`	`true`
Value in checked state.
`falseValue`	`string` \| `number` \| `boolean`	`false`
Value in unchecked state.
`name`	`string`	—
The name attribute of the input, resolved from group context if available.
`readOnly`	`boolean`	`false`
When present, it specifies that an input field is read-only.
`required`	`boolean`	`false`
When present, it specifies that the element is required.
`tabIndex`	`number`	—
Tab index for keyboard navigation.
`invalid`	`boolean`	`false`
When present, it specifies that the component should have invalid state style.
`ariaLabelledby`	`string`	—
Establishes relationships between the component and label(s) where its value should be one or more element IDs.
`ariaLabel`	`string`	—
Establishes a string value that labels the component.
`onFocus`	`(event: FocusEvent<HTMLInputElement>) => void`	—
Callback function that is called when the checkbox is focused.
`onBlur`	`(event: FocusEvent<HTMLInputElement>) => void`	—
Callback function that is called when the checkbox loses focus.
`disabled`	`boolean`	—
When present, it specifies that the item should be disabled.
`value`	`unknown`	—
Semantic value that uniquely identifies this item within the menu and is forwarded to useCheckbox. Used to generate a deterministic DOM id. When not provided, auto-generated.
`closeOnSelect`	`boolean`	`false`
Whether the menu should close when this checkbox item is toggled. Defaults to `false` for checkbox items so toggling the value keeps the menu open; set explicitly to `true` to close on each toggle.
`onSelect`	`(event: MenuItemSelectEvent) => void`	—
Callback fired when the item is activated. Calling `event.preventDefault()` keeps the menu open regardless of `closeOnSelect` .
`onCheckedChange`	`(event: MenuCheckboxItemCheckedChangeEvent) => void`	—
Callback fired when the checkbox item's checked state changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"menu"`
`data-part`	`"item"`

Defines passthrough(pt) options of MenuCheckboxItem component.

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

MenuRadioItemGroup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuRadioItemGroupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuRadioItemGroupInstance) => 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`	`MenuRadioItemGroupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuRadioItemGroupPassThrough>`	—
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: MenuRadioItemGroupInstance) => 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 radio button group.
`defaultValue`	`unknown`	—
The default value of the radio button group.
`name`	`string`	—
Name for the radio item group.
`onValueChange`	`(event: MenuRadioItemGroupValueChangeEvent) => void`	—
Callback fired when the value changes.
`[key: string]`	`any`	—

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

MenuRadioItem#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuRadioItemInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuRadioItemInstance) => 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`	`MenuRadioItemInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuRadioItemPassThrough>`	—
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: MenuRadioItemInstance) => 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.
`checked`	`boolean`	—
When present, it specifies the input's checked state.
`defaultChecked`	`boolean`	—
The default value for the input when not controlled by `checked` and `onCheckedChange` .
`inputId`	`string`	—
Identifier of the underlying input element.
`name`	`string`	—
The name attribute of the input, resolved from group context if available.
`readOnly`	`boolean`	`false`
When present, it specifies that an input field is read-only.
`required`	`boolean`	`false`
When present, it specifies that the element is required.
`tabIndex`	`number`	—
Tab index for keyboard navigation.
`invalid`	`boolean`	`false`
When present, it specifies that the component should have invalid state style.
`ariaLabelledby`	`string`	—
Establishes relationships between the component and label(s) where its value should be one or more element IDs.
`ariaLabel`	`string`	—
Establishes a string value that labels the component.
`onFocus`	`(event: FocusEvent<HTMLInputElement>) => void`	—
Callback function that is called when the radio button is focused.
`onBlur`	`(event: FocusEvent<HTMLInputElement>) => void`	—
Callback function that is called when the radio button loses focus.
`value`	`unknown`	—
Value of the radio item. Used to determine the checked state against the parent group's value.
`disabled`	`boolean`	—
When present, it specifies that the item should be disabled.
`closeOnSelect`	`boolean`	`false`
Whether the menu should close when this radio item is selected. Defaults to `false` for radio items so selecting a value keeps the menu open; set explicitly to `true` to close on each selection.
`onSelect`	`(event: MenuItemSelectEvent) => void`	—
Callback fired when the item is activated. Calling `event.preventDefault()` keeps the menu open regardless of `closeOnSelect` .
`onCheckedChange`	`(event: MenuRadioItemCheckedChangeEvent) => void`	—
Callback fired when the radio item is selected.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"menu"`
`data-part`	`"item"`

Defines passthrough(pt) options of MenuRadioItem component.

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

MenuPopup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuPopupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuPopupInstance) => 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`	`MenuPopupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuPopupPassThrough>`	—
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: MenuPopupInstance) => 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`	—
Used to apply motion to the popup element. It accepts the same properties as useMotion hook.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

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

Defines passthrough(pt) options of MenuPopup component.

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

MenuPositioner#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuPositionerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuPositionerInstance) => 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`	`MenuPositionerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuPositionerPassThrough>`	—
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: MenuPositionerInstance) => 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`	`"menu"`
`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 MenuPositioner component.

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

MenuArrow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MenuArrowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MenuArrowInstance) => 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`	`MenuArrowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MenuArrowPassThrough>`	—
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: MenuArrowInstance) => 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`	`"menu"`
`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 MenuArrow component.

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

MenuPortal#

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?: MenuPortalInstance) => CSSProperties))`	—
The style to apply to the component.
`className`	`(string` \| `((instance?: PortalInstance) => string)) & (string` \| `((instance?: MenuPortalInstance) => 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<MenuPortalProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<MenuPortalProps>>; attrs: Omit<SafeRecord<SafeRecord<MenuPortalProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & MenuPortalExposes`	—
The instance to pass to the component.
`pt`	`PortalPassThrough & Record<PropertyKey, unknown> & MenuPortalPassThrough`	—
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: MenuPortalInstance) => 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 MenuPortal component.

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

MenuCheckboxItem#

Defines passthrough(pt) options of MenuCheckboxItem component.

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

MenuRadioItem#

Defines passthrough(pt) options of MenuRadioItem component.

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

MenuIcon#

MenuCheckboxIcon#

MenuRadioIcon#

Accessibility#

Menu 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.

In popup mode, the component implicitly manages the aria-expanded, aria-haspopup and aria-controls attributes of the target element to define the relation between the target 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. If menu is in overlay mode, popup gets closes and focus moves to target.
`space`	Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.
`escape`	If menu is in overlay mode, popup gets closes 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`	If menu is in overlay mode, popup gets closes and focus moves to the target.
`home`	Moves focus to the first menuitem.
`end`	Moves focus to the last menuitem.

Menu

Pre-styled Versions

Features#

Usage#

Behavior#

Checkbox Items#

Radio Items#

Motion Animation#

Polymorphic Rendering#

Render Function Children#

Pass Through#

API#

MenuRoot#

MenuTrigger#

MenuList#

MenuItem#

MenuSubmenu#

MenuSubmenuTrigger#

MenuIndicator#

MenuLabel#

MenuSeparator#

MenuCheckboxItem#

MenuRadioItemGroup#

MenuRadioItem#

MenuPopup#

MenuPositioner#

MenuArrow#

MenuPortal#

MenuCheckboxItem#

MenuRadioItem#

MenuIcon#

MenuCheckboxIcon#

MenuRadioIcon#

Accessibility#

Keyboard Support#

Menu

Pre-styled Versions

Features#

Usage#

Behavior#

Checkbox Items#

Radio Items#

Motion Animation#

Polymorphic Rendering#

Render Function Children#

Pass Through#

API#

MenuRoot#

MenuTrigger#

MenuList#

MenuItem#

MenuSubmenu#

MenuSubmenuTrigger#

MenuIndicator#

MenuLabel#

MenuSeparator#

MenuCheckboxItem#

MenuRadioItemGroup#

MenuRadioItem#

MenuPopup#

MenuPositioner#

MenuArrow#

MenuPortal#

MenuCheckboxItem#

MenuRadioItem#

MenuIcon#

MenuCheckboxIcon#

MenuRadioIcon#

Accessibility#

Screen Reader#

Keyboard Support#