Menu

The Menu component displays the list of action items that are revealed when the user clicks on the trigger element.

OverviewPropertiesUsageAccessibilityChangelog

MenuProps

extends, ,

Name	Type	Default	Description
defaultOpen?		false	The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
open?			The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
onOpenChange?	(isOpen: ) =>		Event handler called when the open state of the dropdown menu changes.
modal?		true	The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
mobileBreakpoint?		480	The maximum viewport width in pixels at which the mobile drill-down menu is rendered instead of the standard dropdown.

Menu.Trigger

Use the Menu.Trigger to wrap the element that should open the menu.

MenuTriggerProps

extends,

Menu.Content

Use the Menu.Content subcomponent to provide the contents of the menu, such as menu items, links, sub menus, etc.

MenuContentProps

extends, , ,

Name	Type	Default	Description
side?	| | |	'bottom'	The preferred side where the menu content should be rendered relative to the trigger element. This value may be ignored if collisions occur. This prop is ignored within submenus.
alignment?	| |	'start'	The horizontal position where the menu content should be rendered relative to the trigger element. This value may be ignored if collisions occur or when side is set to 'right' or 'left'. This prop is ignored within submenus.
onCloseAutoFocus?	(event: ) =>		Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
avoidCollisions?		true	When true, overrides the side and align preferences to prevent collisions with boundary edges.
collisionBoundary?	| | < | >		Additional elements can be provided to be included in the boundary check for menu. By default this is the viewport.
onInteractOutside?	(event: <{ originalEvent: ; }> | <{ originalEvent: ; }>) =>		Event handler called when a pointer or focus event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault().

Menu.Intent

Use Menu.Intent to render a menu item that sends an intent.

MenuIntentProps

Signature:

export declare type MenuIntentProps = | ;

Menu.Item

Provide the individual menu items using the Menu.Item subcomponent. To specify what happens when a Menu.Item is selected, the onSelect callback needs to be defined.

MenuItemProps

Signature:

export declare type MenuItemProps<E extends > = <E, >;

MenuItemOwnProps

extends, , , ,

Name	Type	Default	Description
disabled?			Whether the menu item is disabled. If true, it prevents the user from interacting with the item and removes it from the tab order and keyboard navigation. For a soft-disabled item that stays focusable, is announced to screen readers, and can reveal its Menu.ItemTooltip on desktop, set aria-disabled instead. A soft-disabled item stays interactive and still fires onSelect, but selecting it does not close the menu.
textValue?			Optional text used for typeahead purposes. By default, the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
onSelect			Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault() in this handler prevents the dropdown menu from closing when selecting that item.

Menu.ItemTooltip

Menu.ItemTooltip can be added as a child to a Menu.Item to provide additional information when you hover or focus on the item.

MenuItemTooltipProps

extends, , ,

Menu.Prefix

Use the Menu.Prefix to add an icon on the left side of a Menu.Item.

MenuPrefixProps

extends, , , ,

Menu.Suffix

Use the Menu.Suffix to add an icon on the right side of a Menu.Item.

MenuSuffixProps

extends, , ,

Menu.Link

Use the Menu.Link subcomponent to display links inside the menu.

MenuLinkProps

Signature:

export declare type MenuLinkProps<E extends > = <E, >;

Menu.Group

Use the Menu.Group subcomponent to group multiple items in the menu content. Pass the label prop to give the group a visible heading that also serves as its accessible name.

MenuGroupProps

extends, , ,

Name	Type	Default	Description
label?			A heading rendered above the group that also becomes its accessible name. Prefer this over wiring a Menu.Label and aria-labelledby by hand.

Menu.Label

Menu.Label allows you to add a descriptive label inside the menu content. The rendered label is not focusable via the arrow keys. When rendered inside a Menu.Group, it automatically becomes that group's accessible name.

MenuLabelProps

extends, , , ,

Menu.Sub

The Menu.Sub component allows you to add a submenu.

MenuSubProps

extends

Name	Type	Default	Description
defaultOpen?			The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
open?			The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
onOpenChange?	(isOpen: ) =>		Event handler called when the open state of the dropdown menu changes.

Menu.SubTrigger

Use the Menu.SubTrigger to wrap the element that should open the submenu.

MenuSubTriggerProps

extends, , ,

Name	Type	Default	Description
disabled?			Whether the menu trigger item is disabled. If true, it prevents the user from interacting with the item.
textValue?			Optional text used for typeahead purposes. By default, the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.

Menu.SubContent

Use the Menu.SubContent component to provide the contents of the submenu.

MenuSubContentProps

extends, , , ,