ui5-menu
component represents a hierarchical menu structure.
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​
Download Open in Playground Edit
Properties​
Description Defines the header text of the menu (displayed on mobile). Type string
Default ""
Description Indicates if the menu is open Type boolean
Default false Since 1.10.0
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
Description Defines the ID or DOM Reference of the element that the menu is shown at Type HTMLElement | string
Default "" Since 1.10.0
default​
Description Defines the items of this component.Note: Use ui5-menu-item
for the intended design. Type Array<MenuItem>
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.0Since 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​
Description Shows the Menu near the opener element. Return type Promise<void>
Parameters opener : HTMLElement
the element that the popover is shown at
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.
Download Open in Playground Edit
Download Open in Playground Edit