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

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

open

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

busy

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

busyDelay

Description	Defines the delay in milliseconds, after which the busy 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 that the menu is shown at
Type	`HTMLElement \| string`
Default	""
Since	1.10.0

Slots

default

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

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

after-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

after-close

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

item-focus

Description	Fired when a menu item receives focus.
Type	`CustomEvent<MenuItemFocusEventDetail>`
Parameters	ref: `HTMLElement` The currently focused element representing a `ui5-menu-item`. item: `HTMLElement` The `ui5-menu-item` represented by the focused element.
Since	1.23.1

Methods

showAt

Description	Shows the Menu near the opener element.
Return type	`Promise<void>`
Parameters	opener: `HTMLElement` the element that the popover is shown at

close

Description	Closes the Menu.
Return type	`void`

CSS Parts

No CSS parts available for this component.

More Samples

You can nest menu items to create sub menus.