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/navigation';

Demo

CodeSandbox

Default open menu

You can control whether the menu is open when the component is loaded.

CodeSandbox

Groups and icons

You can organize menu items into logical groups. Always label groups properly, either by using the Menu.Label and aria-labelledby, or by setting an aria-label directly on the group. Optionally, you can add icons using Menu.Prefix or Menu.Suffix.

CodeSandbox

Tooltips

This example shows how to add tooltips to menu items.

CodeSandbox

Nested menus

You can create nested menus by using Menu as a child of Menu.Item. This allows you to create multi-level navigation structures.

CodeSandbox

Content alignment

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

CodeSandbox

Intents

Use Menu.Intent to add intents.

CodeSandbox