lightning:menuItem

Represents a list item in a menu.

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. Selecting a menu item applies the selected state to that item.

({
    handleSelect : function (cmp, event) {
        var menuItem = event.getSource();
        // Toggle check mark on the menu item
        menuItem.set("v.checked", !menuItem.get("v.checked"));
    }
})
Methods

This component supports the following method.

focus(): Sets the focus on the element.

Attributes

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.
onactive Action DEPRECATED. The action triggered when this menu item becomes active.