Skip to main content

Menu

ui5-menu component represents a hierarchical menu structure.

Usage​

ui5-menu contains ui5-menu-item components. An arbitrary hierarchy structure can be represented by recursively nesting menu items.

Keyboard Handling​

The ui5-menu provides advanced keyboard handling. The user can use the following keyboard shortcuts in order to navigate trough the tree:

  • Arrow Up / Arrow Down - Navigates up and down the menu items that are currently visible.
  • Arrow Right, Space or Enter - Opens a sub-menu if there are menu items nested in the currently clicked menu item.
  • Arrow Left or Escape - Closes the currently opened sub-menu.

Note: if the text ditrection is set to Right-to-left (RTL), Arrow Right and Arrow Left functionality is swapped.

ES6 Module Import​

import "@ui5/webcomponents/dist/Menu.js";

Basic Sample​

Properties​

headerText​

DescriptionDefines the header text of the menu (displayed on mobile).
Typestring
Default""

open​

DescriptionIndicates if the menu is open
Typeboolean
Defaultfalse
Since1.10.0

busy​

DescriptionDefines if a loading indicator would be displayed inside the corresponding ui5-menu popover.
Typeboolean
Defaultfalse
Since1.13.0

busyDelay​

DescriptionDefines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover..
Typenumber
Default1000
Since1.13.0

opener​

DescriptionDefines the ID or DOM Reference of the element that the menu is shown at
TypeHTMLElement | string
Default""
Since1.10.0

Slots​

default​

DescriptionDefines the items of this component.
Note: Use ui5-menu-item for the intended design.
TypeArray<MenuItem>

Events​

item-click​

DescriptionFired when an item is being clicked.
Note: Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.
TypeCustomEvent<MenuItemClickEventDetail>
Parametersitem: HTMLElement
The currently clicked menu item.
text: string
The text of the currently clicked menu item.

before-open​

DescriptionFired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. This event does not bubble.
Note: Since 1.14.0 the event is also fired before a sub-menu opens.
TypeCustomEvent<MenuBeforeOpenEventDetail>
Parametersitem: HTMLElement
The ui5-menu-item that triggers opening of the sub-menu or undefined when fired upon root menu opening.
Since:1.14.0
Since1.10.0

after-open​

DescriptionFired after the menu is opened. This event does not bubble.
TypeCustomEvent
Since1.10.0

before-close​

DescriptionFired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. This event does not bubble.
TypeCustomEvent<MenuBeforeCloseEventDetail>
ParametersescPressed: boolean
Indicates that ESC key has triggered the event.
Since1.10.0

after-close​

DescriptionFired after the menu is closed. This event does not bubble.
TypeCustomEvent
Since1.10.0

item-focus​

DescriptionFired when a menu item receives focus.
TypeCustomEvent<MenuItemFocusEventDetail>
Parametersref: HTMLElement
The currently focused element representing a ui5-menu-item.
item: HTMLElement
The ui5-menu-item represented by the focused element.
Since1.23.1

Methods​

showAt​

DescriptionShows the Menu near the opener element.
Return typePromise<void>
Parametersopener: HTMLElement
the element that the popover is shown at

close​

DescriptionCloses the Menu.
Return typevoid

CSS Parts​

No CSS parts available for this component.

More Samples​

You can nest menu items to create sub menus.