Skip to main content

Menu

<ui5-menu> | Since 1.3.0

ui5-menu component represents a hierarchical menu structure.

Structure​

The ui5-menu can hold two types of entities:

  • ui5-menu-item components
  • ui5-menu-separator - used to separate menu items with a line

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

open​

DescriptionIndicates if the menu is open
Typeboolean
Defaultfalse
Since1.10.0

loading​

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

loadingDelay​

DescriptionDefines the delay in milliseconds, after which the loading 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 at which the menu is shown. When using this attribute in a declarative way, you must only use the id (as a string) of the element at which you want to show the popover. You can only set the opener attribute to a DOM Reference when using JavaScript.
TypeHTMLElement | string | undefined
Defaultundefined
Since1.10.0

Slots​

default​

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

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

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.
Since1.10.0
BubblesNo
CancelableNo

open​

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

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

close​

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

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

You can nest menu items to create sub menus.

Menu Item with Additional Text​

Menu Item with End Content​

Handling focus behaviour when adding items dynamically​