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.

when there is endContent :

  • Arrow Left or ArrowRight - Navigate between the menu item actions and the menu item itself
  • Arrow Up / Arrow Down - Navigates up and down the currently visible menu items

Note: If the text direction is set to Right-to-left (RTL), Arrow Right and Arrow Left functionality is swapped.

Application developers are responsible for ensuring that interactive elements placed in the endContent slot have the correct accessibility behaviour, including their enabled or disabled states. The menu does not manage these aspects when the menu item state changes.

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

horizontalAlign​

DescriptionDetermines the horizontal alignment of the menu relative to its opener control.
Type"Center" | "Start" | "End" | "Stretch"
Default"Start"

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 | null | 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
CancelableYes - via preventDefault()

before-open​

DescriptionFired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.
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
BubblesYes
CancelableYes - via preventDefault()

open​

DescriptionFired after the menu is opened.
TypeCustomEvent
Since1.10.0
BubblesYes
CancelableNo

before-close​

DescriptionFired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.
TypeCustomEvent<MenuBeforeCloseEventDetail>
ParametersescPressed: boolean
Indicates that ESC key has triggered the event.
Since1.10.0
BubblesYes
CancelableYes - via preventDefault()

close​

DescriptionFired after the menu is closed.
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​

Item Groups with Checkable Menu Items​