Menu

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

Import

import { Menu } from '@dynatrace/strato-components-preview/navigation';

Use cases

CodeSandbox

Default open menu

Allows you to control if the menu is open when the component is loaded.

CodeSandbox

Groups, items with icons

Groups allow you to semantically group items within the menu. When using a group, please make sure it is properly labelled. This can be done by either using the Menu.Label and referencing it using aria-labelledby or by setting an aria-label directly on the group. To provide further context, it is also possible to add icons to an item using Menu.ItemIcon.

CodeSandbox

Use tooltips in the menu

Allows you to use tooltips in the menu.

CodeSandbox

Nested / multi level menu

Allows you to create multi-level menus.

CodeSandbox

Menu content alignment

The alignment prop allows you to position the menu content relative to the trigger.

CodeSandbox

Props

MenuProps

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

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.

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

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

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.

MenuGroupProps

extends, , ,

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

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