Menu

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

OverviewPropertiesUsage

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