UserMenuItem

<ui5-user-menu-item> | Since 2.5.0

info

The following entity is available under an experimental flag and its API and behavior are subject to change.

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

Usage

ui5-user-menu-item represents a node in a ui5-user-menu. The user menu itself is rendered as a list, and each ui5-menu-item is represented by a menu item in that menu. Therefore, you should only use ui5-user-menu-item directly in your apps. The ui5-menu menu item is internal for the menu, and not intended for public use.

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";

Properties

text

Description	Defines the text of the tree item.
Type	string | undefined
Default	undefined

additionalText

Description	Defines the additionalText, displayed in the end of the menu item. Note: The additional text will not be displayed if there are items added in items slot or there are components added to endContent slot. The priority of what will be displayed at the end of the menu item is as follows: sub-menu arrow (if there are items added in items slot) -> components added in endContent -> text set to additionalText.
Type	string | undefined
Default	undefined
Since	1.8.0

icon

Description	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.
Type	string | undefined
Default	undefined

disabled

Description	Defines whether menu item is in disabled state. Note: A disabled menu item is noninteractive.
Type	boolean
Default	false

loading

Description	Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover. Note: If set to true a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.
Type	boolean
Default	false
Since	1.13.0

loadingDelay

Description	Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.
Type	number
Default	1000
Since	1.13.0

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	1.7.0

tooltip

Description	Defines the text of the tooltip for the menu item.
Type	string | undefined
Default	undefined
Since	1.23.0

checked

Description	Defines whether menu item is in checked state. Note: checked state is only taken into account when menu item is added to menu item group with checkMode other than None. Note: A checked menu item has a checkmark displayed at its end.
Type	boolean
Default	false
Since	2.12.0

accessibilityAttributes

Description	Defines the additional accessibility attributes that will be applied to the component. The following fields are supported: - ariaKeyShortcuts: Indicated the availability of a keyboard shortcuts defined for the menu item. - role: Defines the role of the menu item. If not set, menu item will have default role="menuitem".
Type	MenuItemAccessibilityAttributes
Default	{}
Since	2.1.0

type

Description	Defines the visual indication and behavior of the list items. Available options are Active (by default), Inactive, Detail and Navigation. Note: When set to Active or Navigation, the item will provide visual response upon press and hover, while with type Inactive and Detail - will not.
Type	"Inactive" | "Active" | "Detail" | "Navigation"
Default	"Active"

navigated

Description	The navigated state of the list item. If set to true, a navigation indicator is displayed at the end of the list item.
Type	boolean
Default	false
Since	1.10.0

highlight

Description	Defines the highlight state of the list items. Available options are: "None" (by default), "Positive", "Critical", "Information" and "Negative".
Type	"None" | "Positive" | "Critical" | "Negative" | "Information"
Default	"None"
Since	1.24

selected

Description	Defines the selected state of the component.
Type	boolean
Default	false

Slots

default

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

endContent

Description	Defines the components that should be displayed at the end of the menu item. Note: It is highly recommended to slot only components of type ui5-button,ui5-link or ui5-icon in order to preserve the intended design. If there are components added to this slot, and there is text set in additionalText, it will not be displayed. If there are items added to items slot, nether additionalText nor components added to this slot would be displayed. The priority of what will be displayed at the end of the menu item is as follows: sub-menu arrow (if there are items added in items slot) -> components added in endContent -> text set to additionalText. 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.
Type	Array<HTMLElement>
Since	2.0.0

deleteButton

Description	Defines the delete button, displayed in "Delete" mode. Note: While the slot allows custom buttons, to match design guidelines, please use the ui5-button component. Note: When the slot is not present, a built-in delete button will be displayed.
Type	Array<IButton>
Since	1.9.0

Events

before-open

Description	Fired 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.
Type	CustomEvent<MenuBeforeOpenEventDetail>
Parameters	item: HTMLElement The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening.
Since	1.10.0
Bubbles	No
Cancelable	Yes - via preventDefault()

open

Description	Fired after the menu is opened.
Type	CustomEvent
Bubbles	No
Cancelable	No

before-close

Description	Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.
Type	CustomEvent<MenuBeforeCloseEventDetail>
Parameters	escPressed: boolean Indicates that ESC key has triggered the event.
Since	1.10.0
Bubbles	No
Cancelable	Yes - via preventDefault()

close

Description	Fired after the menu is closed.
Type	CustomEvent
Since	1.10.0
Bubbles	No
Cancelable	No

check

Description	Fired when an item is checked or unchecked.
Type	CustomEvent
Since	2.12.0
Bubbles	Yes
Cancelable	No

detail-click

Description	Fired when the user clicks on the detail button when type is Detail.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.