Menu API

API documentation for Menu component

MenuRoot#

Props#

Defines valid properties in Menu component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuRootInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuRootInstance) => ReactNode)	null	The children to render.
onOpenChange	(event: MenuRootOpenChangeEvent) => void	null	Callback fired when the menu's open state changes.
open	boolean	null	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 (menubar). In composite mode, submenus open on hover and focusedOptionId is an array tracking the focus path.
appendTo	HTMLElement \| "body" \| "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.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Menu component.

name	type	default	description
opened	boolean	null	Whether the menu is opened.
focused	boolean	null	Whether the menu is focused.
focusedOptionId	string \| string[]	null	The ID of the focused option (HTML id attribute). In composite mode, this is an array representing the focus path (e.g., ['menu_0', 'menu_0_1']). The last element is used for aria-activedescendant.
contextMenuTarget	{ pageX: number; pageY: number }	null	The target position for context menu (used when triggered by right-click).

Exposes#

Defines the methods and properties exposed by Menu component.

name	type	default	description
state	useMenuState	null	The state of the useMenu.
portalRef	RefObject<{ containerRef: { current: { elementRef: RefObject<HTMLDivElement> } } }>	null	Reference to the portal element.
triggerRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the trigger element.
listRef	RefObject<HTMLUListElement>	null	Reference to the list element.
registerItem	(id: string, ref: HTMLElement) => void	null	Register an item with the menu.
unregisterItem	(id: string) => void	null	Unregister an item from the menu.
onTriggerClick	(event?: MouseEvent) => void	null	Handle trigger click event.
onOverlayEnter	() => void	null	Handle overlay enter event.
changeVisibleState	(isVisible: boolean) => void	null	Change the visible state.
onListFocus	() => void	null	Handle list focus event.
onListBlur	() => void	null	Handle list blur event.
onListKeyDown	(event: KeyboardEvent) => void	null	Handle keyboard events on the list.
changeFocusedOptionId	(id: string, level?: number) => void	null	Change the focused option ID. In composite mode, can specify level to set focus at a specific depth.
hideSubmenusAfterLevel	(targetItemId: string) => void	null	Hide all submenus at or after a specific level (composite mode only).
onItemClick	(event: MouseEvent) => void	null	Handle item click event.

Events#

MenuRootOpenChangeEvent

Event fired when the menu's open state changes.

name	type	description
value	boolean	The new value of the menu's open state.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Menu component.

name	type	default	description
root	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
list	MenuRootPassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the list's DOM element.
item	MenuRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the item's DOM element.
checkboxItem	MenuRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the checkbox item's DOM element.
radioItem	MenuRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the radio item's DOM element.
label	MenuRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the label's DOM element.
trigger	MenuRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the trigger's DOM element.
icon	MenuRootPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the item icon's DOM element.
checkboxIcon	MenuRootPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the checkbox item icon's DOM element.
radioIcon	MenuRootPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the radio item icon's DOM element.
separator	MenuRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the separator's DOM element.
portal	MenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the portal's DOM element.

Types#

Instance

Instance of Menu component.

values
ComponentInstance<MenuRootProps, MenuRootState, MenuRootExposes>

MenuList#

Props#

Defines valid properties in MenuList component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuListInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuListInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuListPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuListInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuList component.

name	type	default	description
menu	MenuRootInstance	null	Instance of the Menu component.
submenu	MenuSubInstance	null	Instance of the MenuSub component.
parentLevel	MenuLevelContextInterface	null	Context value of the MenuLevel.
listLevel	number	null	Level of the list.
listId	string	null	ID of the list element.
triggerIndex	number	null	Index of the trigger element.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuList component.

name	type	default	description
root	MenuListPassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the root's DOM element.
content	MenuListPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.

Types#

Instance

Instance of MenuList component.

values
ComponentInstance<MenuListProps, MenuListState, MenuListExposes>

MenuLabel#

Props#

Defines valid properties in MenuLabel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuLabelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuLabelInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuLabelPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuLabelInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuLabel component.

name	type	default	description
menu	MenuRootInstance	null	Instance of the Menu component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuLabel component.

name	type	default	description
root	MenuLabelPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MenuLabel component.

values
ComponentInstance<MenuLabelProps, MenuLabelState, MenuLabelExposes>

MenuSub#

Props#

Defines valid properties in MenuSub component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuSubInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuSubInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuSubPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuSubInstance) => ReactNode)	null	The children to render.
disabled	boolean	false	Whether the submenu is disabled.
onOpenChange	(event: MenuSubOpenChangeEvent) => void	null	Callback fired when the submenu's open state changes.
open	boolean	null	Controlled open state of the submenu.
defaultOpen	boolean	false	Default open state for uncontrolled mode.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in MenuSub component.

name	type	default	description
opened	boolean	null	Whether the submenu is opened.

Exposes#

Defines the methods and properties exposed by MenuSub component.

name	type	default	description
menu	MenuRootInstance	null	The Menu component instance.
parentLevel	MenuLevelContextInterface	null	Context value of the MenuLevel.
state	useMenuSubState	null	The state of the useMenuSub.
portalRef	RefObject<{ containerRef: { current: { elementRef: RefObject<HTMLDivElement> } } }>	null	Reference to the portal element.
triggerRef	RefObject<HTMLDivElement>	null	Reference to the trigger element.
listRef	RefObject<HTMLUListElement>	null	Reference to the list element.
toggle	() => void	null	Toggle the submenu open/close state.
open	() => void	null	Open the submenu (composite mode).
close	() => void	null	Close the submenu (composite mode).
onTriggerClick	() => void	null	Handle trigger click event.

Events#

MenuSubOpenChangeEvent

Event fired when the menu's open state changes.

name	type	description
value	boolean	The new value of the submenu's open state.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuSub component.

name	type	default	description
root	MenuSubPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MenuSub component.

values
ComponentInstance<MenuSubProps, MenuSubState, MenuSubExposes>

MenuSeparator#

Props#

Defines valid properties in MenuSeparator component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuSeparatorInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuSeparatorInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuSeparatorPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuSeparatorInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuSeparator component.

name	type	default	description
menu	MenuRootInstance	null	Instance of the Menu component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuSeparator component.

name	type	default	description
root	MenuSeparatorPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MenuSeparator component.

values
ComponentInstance<MenuSeparatorProps, MenuSeparatorState, MenuSeparatorExposes>

MenuTrigger#

Props#

Defines valid properties in MenuTrigger component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuTriggerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuTriggerInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuTriggerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuTriggerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuTrigger component.

name	type	default	description
menu	MenuRootInstance	null	Instance of the Menu component.
submenu	MenuSubInstance	null	Instance of the MenuPortal component.
portal	MenuPortalInstance	null	Instance of the MenuPortal component.
level	MenuLevelContextInterface	null	Instance of the MenuLevel component.
itemId	string	null	Identifier of the menu item.
focused	boolean	null	Whether the menu item is focused.
disabled	boolean	null	Whether the menu item is disabled.
ariaLevel	number	null	Aria level of the menu item.
ariaPosInSet	number	null	Aria position in set of the menu item.
ariaSetSize	number	null	Aria set size of the menu item.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuTrigger component.

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

Types#

Instance

Instance of MenuTrigger component.

values
ComponentInstance<MenuTriggerProps, MenuTriggerState, MenuTriggerExposes>

MenuPortal#

Props#

Defines valid properties in MenuPortal component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuPortalInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuPortalInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuPortalPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuPortalInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuPortal component.

name	type	default	description
menu	MenuRootInstance	null	Instance of the Menu component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuPortal component.

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

MenuIcon#

Props#

Defines valid properties in MenuIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuIconInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuIcon component.

name	type	default	description
menu	MenuRootInstance	null	The Menu component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuIcon component.

name	type	default	description
root	MenuIconPassThroughType<SVGAttributes<SVGElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MenuIcon component.

values
ComponentInstance<MenuIconProps, MenuIconState, MenuIconExposes>

MenuCheckboxGroup#

Props#

Defines valid properties in MenuCheckboxGroup component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuCheckboxGroupInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuCheckboxGroupInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuCheckboxGroupPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuCheckboxGroupInstance) => ReactNode)	null	The children to render.
value	unknown[]	null	Values of the selected checkbox items.
defaultValue	unknown[]	null	Default values of the selected checkbox items.
onValueChange	(event: MenuCheckboxGroupValueChangeEvent) => void	null	Callback to invoke when value changes.
[key: string]	any	null

Exposes#

Defines the methods and properties exposed by MenuCheckboxGroup component.

name	type	default	description
context	MenuCheckboxGroupContextInterface	null	Context value for the checkbox group containing the current selection state, change handler, and optional group name.

Types#

Instance

Instance of MenuCheckboxGroup component.

values
ComponentInstance<MenuCheckboxGroupProps, MenuCheckboxGroupState, MenuCheckboxGroupExposes>

MenuItem#

Props#

Defines valid properties in MenuItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuItemInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuItemInstance) => ReactNode)	null	The children to render.
disabled	boolean	null	When present, it specifies that the item should be disabled.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuItem component.

name	type	default	description
menu	MenuRootInstance	null	Instance of the Menu component.
submenu	MenuSubInstance	null	Instance of the MenuSub component.
portal	MenuPortalInstance	null	Instance of the MenuPortal component.
level	MenuLevelContextInterface	null	Context value of the MenuLevel.
itemRef	RefObject<HTMLElement>	null	Reference to the item element.
itemId	string	null	ID of the item element.
focused	boolean	null	Whether the item is focused or not.
ariaLevel	number	null	Aria level of the item.
ariaPosInSet	number	null	Aria position in set of the item.
ariaSetSize	number	null	Aria set size of the item.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuItem component.

name	type	default	description
root	MenuItemPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MenuItem component.

values
ComponentInstance<MenuItemProps, MenuItemState, MenuItemExposes>

MenuCheckboxItem#

Props#

Defines valid properties in MenuCheckboxItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuCheckboxItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuCheckboxItemInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuCheckboxItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuCheckboxItemInstance) => ReactNode)	null	The children to render.
checked	boolean	null	Whether the checkbox item is checked or not.
defaultChecked	boolean	null	Default checked state of the checkbox item.
disabled	boolean	null	When present, it specifies that the item should be disabled.
onCheckedChange	(event: MenuCheckboxItemCheckedChangeEvent) => void	null	Callback to invoke when checked state changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuCheckboxItem component.

name	type	default	description
menu	MenuRootInstance	null	Instance of the Menu component.
submenu	MenuSubInstance	null	Instance of the MenuSub component.
portal	MenuPortalInstance	null	Instance of the MenuPortal component.
checkboxGroup	MenuCheckboxGroupContextInterface	null	Context value of the MenuCheckboxGroup.
level	MenuLevelContextInterface	null	Context value of the MenuLevel.
itemRef	RefObject<HTMLElement>	null	Reference to the item element.
itemId	string	null	ID of the item element.
focused	boolean	null	Whether the item is focused or not.
ariaLevel	number	null	Aria level of the item.
ariaPosInSet	number	null	Aria position in set of the item.
ariaSetSize	number	null	Aria set size of the item.
checked	boolean	null	Whether the checkbox is checked or not.
handleCheckedChange	(checked: boolean) => void	null	Handler to change checked state.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuCheckboxItem component.

name	type	default	description
root	MenuCheckboxItemPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MenuCheckboxItem component.

values
ComponentInstance<MenuCheckboxItemProps, MenuCheckboxItemState, MenuCheckboxItemExposes>

MenuRadioGroup#

Props#

Defines valid properties in MenuRadioGroup component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuRadioGroupInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuRadioGroupInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuRadioGroupPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuRadioGroupInstance) => ReactNode)	null	The children to render.
value	unknown	null	Value of the selected radio item.
defaultValue	unknown	null	Default value of the selected radio item.
name	string	null	Name for the radio group.
onValueChange	(event: MenuRadioGroupValueChangeEvent) => void	null	Callback to invoke when value changes.
[key: string]	any	null

Exposes#

Defines the methods and properties exposed by MenuRadioGroup component.

name	type	default	description
context	MenuRadioGroupContextInterface	null	Context value for the radio group containing the current selection state, change handler, and optional group name.

Types#

Instance

Instance of MenuRadioGroup component.

values
ComponentInstance<MenuRadioGroupProps, MenuRadioGroupState, MenuRadioGroupExposes>

MenuRadioItem#

Props#

Defines valid properties in MenuRadioItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuRadioItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuRadioItemInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuRadioItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuRadioItemInstance) => ReactNode)	null	The children to render.
value	unknown	null	Value of the radio item.
disabled	boolean	null	When present, it specifies that the item should be disabled.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by MenuRadioItem component.

name	type	default	description
menu	MenuRootInstance	null	Instance of the Menu component.
submenu	MenuSubInstance	null	Instance of the MenuSub component.
portal	MenuPortalInstance	null	Instance of the MenuPortal component.
level	MenuLevelContextInterface	null	Context value of the MenuLevel.
radioGroup	MenuRadioGroupContextInterface	null	Context value of the MenuRadioGroup.
itemRef	RefObject<HTMLElement>	null	Reference to the item element.
itemId	string	null	ID of the item element.
focused	boolean	null	Whether the item is focused or not.
ariaLevel	number	null	Aria level of the item.
ariaPosInSet	number	null	Aria position in set of the item.
ariaSetSize	number	null	Aria set size of the item.
checked	boolean	null	Whether the radio item is checked or not.
handleValueChange	() => void	null	Handler to select this radio item.

Events#

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuRadioItem component.

name	type	default	description
root	MenuRadioItemPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MenuRadioItem component.

values
ComponentInstance<MenuRadioItemProps, MenuRadioItemState, MenuRadioItemExposes>

MenuCheckboxIcon#

Props#

Defines valid properties in MenuCheckboxIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuCheckboxIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuCheckboxIconInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuCheckboxIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuCheckboxIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuCheckboxIcon component.

name	type	default	description
menu	MenuRootInstance	null	The Menu component instance.
checkboxitem	MenuCheckboxItemInstance	null	Instance of the MenuCheckboxItem component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuCheckboxIcon component.

name	type	default	description
root	MenuCheckboxIconPassThroughType<SVGAttributes<SVGElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MenuCheckboxIcon component.

values
ComponentInstance<MenuCheckboxIconProps, MenuCheckboxIconState, MenuCheckboxIconExposes>

MenuRadioIcon#

Props#

Defines valid properties in MenuRadioIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: MenuRadioIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MenuRadioIconInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<MenuRadioIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: MenuRadioIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MenuRadioIcon component.

name	type	default	description
menu	MenuRootInstance	null	The Menu component instance.
radioitem	MenuRadioItemInstance	null	Instance of the MenuRadioItem component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MenuRadioIcon component.

name	type	default	description
root	MenuRadioIconPassThroughType<SVGAttributes<SVGElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MenuRadioIcon component.

values
ComponentInstance<MenuRadioIconProps, MenuRadioIconState, MenuRadioIconExposes>

useMenu#

Types#

Instance

Instance of useMenu headless.

values
HeadlessInstance<useMenuProps, useMenuState, useMenuExposes>

useMenuSub#

Types#

Instance

Instance of useMenuSub headless.

values
HeadlessInstance<useMenuSubProps, useMenuSubState, useMenuSubExposes>