ui5-menu-item is the item to use inside a ui5-menu.
An arbitrary hierarchy structure can be represented by recursively nesting menu items.
ui5-menu-item represents a node in a ui5-menu. The menu itself is rendered as a list,
and each ui5-menu-item is represented by a list item in that list. Therefore, you should only use
ui5-menu-item directly in your apps. The ui5-li list item is internal for the list, and not intended for public use.
ES6 Module Import​
import "@ui5/webcomponents/dist/MenuItem.js";
Properties​
| 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 |
| 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 |
| Description | Defines the text of the tooltip for the menu item. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.23.0 |
| 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" |
accessibilityAttributes​
| Description | Defines the additional accessibility attributes that will be applied to the component. The following fields are supported:
- ariaSetsize: Defines the number of items in the current set when not all items in the set are present in the DOM. Note: The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set -1.
- ariaPosinset: Defines an element's number or position in the current set when not all items are present in the DOM. Note: The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. |
| Type | ListItemAccessibilityAttributes |
| Default | |
| Since | 1.15.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 |
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 |
default​
| Description | Defines the items of this component.
Note: The slot can hold ui5-menu-item and ui5-menu-separator items.
If there are items added to this slot, an arrow will be displayed at the end of the item in order to indicate that there are items added. In that case components added to endContent slot or additionalText content will not 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<IMenuItem> |
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 |
| 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 |
detail-click​
| Description | Fired when the user clicks on the detail button when type is Detail. |
| Type | CustomEvent |
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.