<ui5-button id="btnOpenBasic">Open Menu</ui5-button> <br/>
<ui5-menu id="menuBasic">
	<ui5-menu-item text="New File" icon="add-document"></ui5-menu-item>
	<ui5-menu-item text="New Folder" icon="add-folder" disabled></ui5-menu-item>
	<ui5-menu-item text="Open" icon="open-folder" starts-section></ui5-menu-item>
	<ui5-menu-item text="Close"></ui5-menu-item>
	<ui5-menu-item text="Preferences" icon="action-settings" starts-section></ui5-menu-item>
	<ui5-menu-item text="Exit" icon="journey-arrive"></ui5-menu-item>
</ui5-menu>
<script>
	btnOpenBasic.addEventListener("click", function(event) {
		menuBasic.showAt(btnOpenBasic);
	});
</script>

Menu with Sub-menu items

Open Menu

<ui5-button id="btnOpenSubs">Open Menu</ui5-button> <br/>
<ui5-menu id="menuSubs">
	<ui5-menu-item text="New File" icon="add-document"></ui5-menu-item>
	<ui5-menu-item text="New Folder" icon="add-folder" disabled></ui5-menu-item>
	<ui5-menu-item text="Open" icon="open-folder" starts-section>
		<ui5-menu-item text="Open Locally" icon="open-folder">
			<ui5-menu-item text="Open from C"></ui5-menu-item>
			<ui5-menu-item text="Open from D"></ui5-menu-item>
			<ui5-menu-item text="Open from E"></ui5-menu-item>
		</ui5-menu-item>
		<ui5-menu-item text="Open from Cloud"></ui5-menu-item>
	</ui5-menu-item>
	<ui5-menu-item text="Save" icon="save">
		<ui5-menu-item text="Save Locally" icon="save">
			<ui5-menu-item text="Save on C" icon="save"></ui5-menu-item>
			<ui5-menu-item text="Save on D" icon="save"></ui5-menu-item>
			<ui5-menu-item text="Save on E" icon="save"></ui5-menu-item>
		</ui5-menu-item>
		<ui5-menu-item text="Save on Cloud" icon="upload-to-cloud"></ui5-menu-item>
	</ui5-menu-item>
	<ui5-menu-item text="Close"></ui5-menu-item>
	<ui5-menu-item text="Preferences" icon="action-settings" starts-section></ui5-menu-item>
	<ui5-menu-item text="Exit" icon="journey-arrive"></ui5-menu-item>
</ui5-menu>
<script>
	btnOpenSubs.addEventListener("click", function(event) {
		menuSubs.showAt(btnOpenSubs);
	});
</script>

Menu with additional text on menu items

Open Menu

<ui5-button id="btnOpenAdditionalText">Open Menu</ui5-button> <br/>
<ui5-menu id="menuAdditionalText">
	<ui5-menu-item text="New File" icon="add-document" additional-text="Ctrl+N"></ui5-menu-item>
	<ui5-menu-item text="New Folder" icon="add-folder" additional-text="Ctrl+F" disabled></ui5-menu-item>
	<ui5-menu-item text="Open" icon="open-folder" starts-section></ui5-menu-item>
	<ui5-menu-item text="Close"></ui5-menu-item>
	<ui5-menu-item text="Preferences" icon="action-settings" starts-section></ui5-menu-item>
	<ui5-menu-item text="Exit" icon="journey-arrive" additional-text="Ctrl+X"></ui5-menu-item>
</ui5-menu>
<script>
	btnOpenAdditionalText.addEventListener("click", function(event) {
		menuAdditionalText.showAt(btnOpenAdditionalText);
	});
</script>

Overview

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";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name

Type

Default Value

Description

headerText
header-text

string

Defines the header text of the menu (displayed on mobile).

open

boolean

false

Indicates if the menu is open

since v1.10.0

opener

DOMReference

Defines the ID or DOM Reference of the element that the menu is shown at

since v1.10.0

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot

Type

Description

default

HTMLElement [0..n]

Defines the items of this component.

Note: Use ui5-menu-item for the intended design.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name

Description

after-close

Fired after the menu is closed. This event does not bubble.

since v1.10.0

after-open

Fired after the menu is opened. This event does not bubble.

since v1.10.0

before-close

Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. This event does not bubble.

since v1.10.0

escPressed

type: boolean
description: Indicates that ESC key has triggered the event.

before-open

Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. This event does not bubble.

since v1.10.0

item-click

Fired when an item is being clicked.

item

type: object
description: The currently clicked menu item.

text

type: string
description: The text of the currently clicked menu item.

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name

Description

Closes the Menu.

showAt

Shows the Menu near the opener element.

opener

type: HTMLElement
description: the element that the popover is shown at

MenuItem

Overview

ui5-menu-item is the item to use inside a ui5-menu. An arbitrary hierarchy structure can be represented by recursively nesting menu items.

Usage

ui5-menu-item is an abstract element, representing a node in a ui5-menu. The menu itself is rendered as a list, and each ui5-menu-item is represented by a list item (ui5-li) in that list. Therefore, you should only use ui5-menu-item directly in your apps. The ui5-li list item is internal for the list, and not intended for public use.

ES6 Module Import

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name

Type

Default Value

Description

accessibleName
accessible-name

string

Defines the accessible ARIA name of the component.

since v1.7.0

additionalText
additional-text

string

Defines the additionalText, displayed in the end of the menu item. Note: The additional text would not be displayed if the item has a submenu.

since v1.8.0

disabled

boolean

false

Defines whether ui5-menu-item is in disabled state.

Note: A disabled ui5-menu-item is noninteractive.

icon

string

Defines the icon to be displayed as graphical element within the component. The SAP-icons font provides numerous options.

* Example: See all the available icons in the Icon Explorer.

startsSection
starts-section

boolean

false

Defines whether a visual separator should be rendered before the item.

text

string

Defines the text of the tree item.

Slots

Slot

Type

Description

default

sap.ui.webc.main.IMenuItem [0..n]

Defines the items of this component.

Theme:

Morning Horizon (Light)

Evening Horizon (Dark)

Horizon High Contrast Black

Horizon High Contrast White

Quartz Light

Quartz Dark

Quartz High Contrast Black

Quartz High Contrast White

Content Density:

Cozy

Compact

Text Direction:

LTR

RTL

Apply

Cancel

Basic Menu

Menu with Sub-menu items

Menu with additional text on menu items

Overview

Usage

Keyboard Handling

ES6 Module Import

Properties/Attributes

Slots

Events

Methods

MenuItem

Overview

Usage

ES6 Module Import

Properties/Attributes

Slots