A lightning:menuItem is a menu item within the lightning:buttonMenu dropdown component. It can hold state such as checked or unchecked, and can contain icons.
Use the class attribute to customize the styling.
This component inherits styling from menus in the Lightning Design System.
Here is an example.
<aura:component> <lightning:buttonMenu alternativeText="Toggle menu"> <lightning:menuItem label="Menu Item 1" value="menuitem1" iconName="utility:table" /> </lightning:buttonMenu> </aura:component>
To implement a multi-select menu, use the checked attribute. The following client-side controller example handles selection via the onselect event on the lightning:buttonMenu component. The selected menu item is passed to event.detail.menuItem. Selecting a menu item applies the selected state to that item.
({ handleSelect : function (cmp, event) { var menuItem = event.detail.menuItem; menuItem.set("v.checked", !menuItem.get("v.checked")); } })
This component supports the following method.
focus(): Sets the focus on the element.
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
accesskey | String | Specifies a shortcut key to activate or focus an element. | |
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
checked | Boolean | If not specified, the menu item is not checkable. If true, the a check mark is shown to the left of the menu item. If false, a check mark is not shown but there is space to accommodate one. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
disabled | Boolean | If true the menu item is not actionable and is shown as disabled. | |
iconName | String | If provided an icon with the provided name is shown to the right of the menu item. | |
label | String | Text of the menu item. | |
onblur | Action | The action triggered when the element releases focus. | |
onfocus | Action | The action triggered when the element receives focus. | |
tabindex | Integer | Specifies the tab order of an element (when the tab button is used for navigating). | |
title | String | Tooltip text. | |
value | String | A value associated with the menu item. |