UserMenuItem

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

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

showSelection

Description	When set, a second line appears below the menu item text showing the text of the currently selected sub-item. Intended for use with a single-select ui5-menu-item-group (check-mode="Single"). When enabled, the checked sub-item cannot be unchecked, ensuring the selection text is always displayed.
Type	boolean
Default	false
Since	2.22.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

accessibleName

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

accessibleRole

Description	Used to define the role of the list item. Note: If not set, the role is automatically inherited from the parent ui5-list based on its accessible-role property (e.g. Menu -> MenuItem, Tree -> TreeItem, ListBox -> Option). An explicitly set accessible-role on the list item takes precedence over the inherited role.
Type	"ListItem" | "MenuItem" | "None" | "Option" | "TreeItem" | undefined (value descriptions in: ListItemAccessibleRole)
Default	undefined
Since	2.23.0

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

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

disabled

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

highlight

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

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

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

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

selected

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

text

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

tooltip

Description	Defines the text of the tooltip for the menu item.
Type	string | undefined
Default	undefined
Since	1.23.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	"Active" | "Detail" | "Inactive" | "Navigation" (value descriptions in: ListItemType)
Default	"Active"

Slots

default

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

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

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

Events

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

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

check

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

click

Description	Fired when the component is activated either with a mouse/tap or by using the Enter or Space key. Note: The event will not be fired if the disabled property is set to true.
Type	CustomEvent<ListItemBaseClickEventDetail>
Parameters	originalEvent: Event The original event from the user interaction.
Since	2.23.0
Bubbles	Yes
Cancelable	No

close

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

detail-click

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

open

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

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.