Skip to main content

Menu

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

MenuProps

extends
NameTypeDefaultDescription
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.

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

MenuTriggerProps

extends,

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

MenuContentProps

extends,
NameTypeDefaultDescription
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.

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, , ,
NameTypeDefaultDescription
disabled?
-

Whether the menu item is disabled. If true, it prevents the user from interacting with the item and the item being focused.

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 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 = ;

Use the Menu.ItemIcon to add an icon to a Menu.Item.

MenuItemIconProps

extends,

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

MenuLinkProps

Signature:

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

Use the Menu.Group subcomponent to group multiple items in the menu content.

MenuGroupProps

extends, , ,

Menu.Label allows you to add a descriptive label inside the menu content. The rendered label is not focusable via the arrow keys.

MenuLabelProps

extends, ,

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

MenuSubProps

extends
NameTypeDefaultDescription
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.

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

MenuSubTriggerProps

extends,
NameTypeDefaultDescription
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.

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

MenuSubContentProps

Signature:

export declare type MenuSubContentProps = ;
Still have questions?
Find answers in the Dynatrace Community