Menu

• Changelog

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

OverviewPropertiesUsageAccessibilityChangelog

Package @dynatrace/strato-components, latest version 3.15.1. Below are the changes to Menu. See Components changelog for all changes to the package.

3.15.0 Released Oct 1, 2026

Updates

• Added a push animation to the mobile drill-down menu, with simultaneous slide and fade transitions for entering and exiting panels. (APPDEV-19507)
• You can now handle pointer and focus events outside an open menu via the new onInteractOutside prop on Menu.Content. (APPDEV-19583)

How to opt in

Pass onInteractOutside to Menu.Content to receive a callback whenever a pointer-down or focus event occurs outside the open menu. The event can be cancelled by calling event.preventDefault().

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

<Menu>
  <Menu.Trigger>
    <Button>Open</Button>
  </Menu.Trigger>
  <Menu.Content
    onInteractOutside={(event) => {
      console.log('Interacted outside', event);
    }}
  >
    <Menu.Item onSelect={() => undefined}>Item</Menu.Item>
  </Menu.Content>
</Menu>;

• Menu.Content now accepts an aria-describedby prop to associate a supplementary description with the menu panel. (APPDEV-20146)

How to opt in

Pass the id of a description element to aria-describedby on Menu.Content. Screen readers will announce the description text after the menu's accessible name when the panel opens.

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

<>
  <p id="menu-desc">These actions apply to the selected item.</p>
  <Menu>
    <Menu.Trigger>...</Menu.Trigger>
    <Menu.Content aria-describedby="menu-desc">...</Menu.Content>
  </Menu>
</>;

• Fixed the issue that prevented navigating and selecting menu items with the keyboard on mobile viewports. (APPDEV-19952)
• SubTrigger, SubContent, Label, and ItemTooltip now expose default props (className, style, data-testid, aria-*, data-dtrum-*) on their root elements (APPDEV-18015)

3.14.0 Released Sep 17, 2026

Updates

Overlays

• Fixed the issue that left keyboard focus outside a dialog that was opened from a Menu.Item. (APPDEV-19146)
• Fixed the trigger button missing explicit aria-haspopup="menu" and aria-expanded attributes, which prevented screen readers from correctly announcing the expanded/collapsed state. (APPDEV-19175)
• Fixed the group divider lines not being rendered between Menu.Group blocks in mobile mode (viewport ≤ 480 px). (APPDEV-19585)
• Fixed the slide-in animation in the mobile menu still playing when prefers-reduced-motion is set to reduce. (APPDEV-19885)
• Fixed the dropdown content being cut off at narrow viewport widths, which caused horizontal scrolling and violated WCAG 1.4.10 (reflow). (APPDEV-19215)

3.13.0 Released Sep 3, 2026

Updates

• Menu.Group now accepts a label prop that renders a heading and names the group for assistive technology. A Menu.Label rendered inside a Menu.Group also becomes that group's accessible name automatically, so you no longer have to pair an id with aria-labelledby yourself. (APPDEV-18962)
• You can now soft-disable a Menu.Item with aria-disabled to keep it focusable and announced to screen readers while showing its Menu.ItemTooltip on desktop, so you can explain why an item is unavailable. Unlike the hard disabled prop, a soft-disabled item stays interactive and still fires onSelect, leaving the behavior to you, and selecting it does not close the menu. (APPDEV-19690)

3.11.3 Released Aug 20, 2026

Updates

• Disabled Menu.Item elements are no longer reachable via keyboard navigation. (APPDEV-18649)
• The Menu.Trigger now sets aria-controls referencing the open menu content, allowing screen readers to announce the expanded state correctly. (APPDEV-19170)

3.11.0 Released Aug 10, 2026

Updates

General

• Overlays such as Tooltip, Menu item tooltips, Select and FilterField suggestion lists, FeatureHighlight, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359)
• Menu.Item and Menu.Link no longer cause a React console warning when textValue is passed. (APPDEV-18440)

3.10.5 Released Aug 10, 2026

Updates

General

• Overlays such as Tooltip, Menu item tooltips, Select and FilterField suggestion lists, FeatureHighlight, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359)

3.10.0 Released Jul 28, 2026

Updates

• On mobile viewports, Menu now renders as a full-screen drill-down panel instead of a fly-out dropdown. Sub-menus open as a new level users can navigate into, with a back button to return to the previous level. Desktop behavior is unchanged. (APPDEV-18330)

3.8.0 Released Jul 1, 2026

Updates

• Fixed nested submenus overflowing the viewport on mobile screens. Submenus now stack inline below their trigger at viewport widths ≤ 480px, and long menu item text truncates with ellipsis. Desktop behavior is unchanged. (APPDEV-18058)

3.6.0 Released May 29, 2026

Updates

• Fixed several outside-click dismissal issues on the Menu component. (APPDEV-16531)

3.5.0 Released May 13, 2026

Updates

• Now checks whether code is running in a browser before accessing browser-only APIs, preventing potential SSR (server-side rendering) issues. (APPDEV-17212)

3.4.0 Released May 5, 2026

Updates

• The Menu trigger now correctly shows its active state when the Menu is open. (APPDEV-16688)

3.2.0 Released Apr 7, 2026

Updates

• Stop calling the SDK function getIntentLink twice when the Menu.Intent component is rendered. (PAPA-32034)