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