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

Description	Defines the header text of the menu (displayed on mobile).
Type	`string \| undefined`
Default	undefined

open

Description	Indicates if the menu is open
Type	`boolean`
Default	false
Since	1.10.0

loading

Description	Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.
Type	`boolean`
Default	false
Since	1.13.0

loadingDelay

Description	Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..
Type	`number`
Default	1000
Since	1.13.0

opener

Description	Defines 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.
Type	`HTMLElement \| string \| undefined`
Default	undefined
Since	1.10.0

Slots

default

Description	Defines the items of this component. Note: Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.
Type	`Array<IMenuItem>`

Events

item-click

Description	Fired 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.
Type	`CustomEvent<MenuItemClickEventDetail>`
Parameters	item: `HTMLElement` The currently clicked menu item. text: `string` The text of the currently clicked menu item.

before-open

Description	Fired 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.
Type	`CustomEvent<MenuBeforeOpenEventDetail>`
Parameters	item: `HTMLElement` The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening. Since:1.14.0
Since	1.10.0

open

Description	Fired after the menu is opened. This event does not bubble.
Type	`CustomEvent`
Since	1.10.0

before-close

Description	Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. This event does not bubble.
Type	`CustomEvent<MenuBeforeCloseEventDetail>`
Parameters	escPressed: `boolean` Indicates that `ESC` key has triggered the event.
Since	1.10.0

close

Description	Fired after the menu is closed. This event does not bubble.
Type	`CustomEvent`
Since	1.10.0

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.