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 ui5-menu-item is in disabled state. Note: A disabled ui5-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 ui5-menu popover. Note: If set to true a ui5-busy-indicator component will be displayed into the related one to the current ui5-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 ui5-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

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

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.