Menu Item

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 implements styling from menus in the Lightning Design System.

When applying Lightning Design System classes or icons, check that they are available in the Lightning Design System release tied to your org. The Lightning Design System site shows the latest Lightning Design System resources, and these become available only when the new release is available in your org.

Here is an example.

1<aura:component>
2  <lightning:buttonMenu alternativeText="Toggle menu">
3    <lightning:menuItem
4      label="Menu Item 1"
5      value="menuitem1"
6      iconName="utility:table"
7    />
8  </lightning:buttonMenu>
9</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.

1({
2  handleActive: function (cmp, event) {
3    var menuItem = event.getSource();
4    // Toggle check mark on the menu item
5    menuItem.set("v.checked", !menuItem.get("v.checked"));
6  },
7});

Use the iconName attribute to add an icon after the text of the menu item. Use the prefixIconName attribute to add an icon before the text of the menu item. For each attribute, specify a utility icon from utility icons in Lightning Design System.

This example specifies an icon to display before the menu item text.

1<lightning:buttonMenu>
2  <lightning:menuItem prefixIconName="utility:user" label="Menu item" />
3  <lightning:menuItem label="Another menu item" />
4</lightning:buttonMenu>

The href attribute allows you to use the button menu for navigation. This example specifies a URL in the menu item’s href attribute to create a link. The link is applied to the content of the menu item, including text and icons.

1<lightning:menuItem href="https://google.com" label="A linked menu item" />

Use the isDraft and draftAlternativeText attributes together to indicate that the menu item is in an unsaved state. The draft indicator, an asterisk, is shown for the menu item when isDraft is true. The draftAlternativeText attribute is required to provide text describing the reason the item is considered in a draft state. The draft state might be used to to show there is unsaved state or data that could be lost, for example if there’s a user change in a customizable menu.