Menu
The Menu
component displays the list of action items that are revealed when
the user clicks on the trigger element.
MenuProps
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. |
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. |
Menu.Trigger
Use the Menu.Trigger
to wrap the element that should open the menu.
MenuTriggerProps
,
Menu.Content
Use the Menu.Content
subcomponent to provide the contents of the menu, such as
menu items, links, sub menus, etc.
MenuContentProps
,
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 |
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. |
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
, , ,
Name | Type | Default | Description |
---|---|---|---|
disabled? | - | Whether the menu item is disabled.
If | |
textValue? | - | Optional text used for typeahead purposes. By default, the typeahead
behavior will use the | |
onSelect | - | Event handler called when the user selects an item (via mouse or keyboard).
Calling |
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
Signature:
export declare type MenuItemTooltipProps = ;
Menu.ItemIcon
Use the Menu.ItemIcon
to add an icon to a Menu.Item
.
MenuItemIconProps
,
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.
MenuGroupProps
, , ,
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.
MenuLabelProps
, ,
Menu.Sub
The Menu.Sub
component allows you to add a submenu.
MenuSubProps
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
,
Name | Type | Default | Description |
---|---|---|---|
disabled? | - | Whether or not 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
Signature:
export declare type MenuSubContentProps = ;