Menu

v1.3.0
@ui5/webcomponents
<ui5-menu>

Basic Menu

Open Menu
<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>
	

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).

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.

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
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
close
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. For the ui5-menu-item

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

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
sap.ui.webcomponents.main.IMenuItem [0..n]
Defines the items of this component.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel