---
schema_version: "1"
id: 791727cca95401db1166d692101a2da6d6fed07bb7d8b961a1cc88bb21a0b666
title: Menu Item
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/menuItem/lightning-menu-item.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-menu-item.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 495eddc5ac37dfba3e7fc153da332570ef83ebcf511094c4b489739e7ac8f581
products:
  - Lightning Component Reference
---

# Menu Item

**`lightning-menu-item`**

Represents a list item in a menu.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="menuItem" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-menu-item` is a menu item within the [`lightning-button-menu`](/docs/platform/lightning-component-reference/guide/lightning-button-menu.html)
dropdown component. It can hold state such as checked or unchecked, and can
contain icons.

Use the `class` attribute to customize the styling.

When applying Lightning Design System classes or icons, check that they’re
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 resources become available only when the new release is available
in your org.

Here’s an example.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-button-menu alternative-text="Toggle menu">
        <lightning-menu-item
            label="Menu Item 1"
            value="menuitem1"
            icon-name="utility:table"
        >
        </lightning-menu-item>
    </lightning-button-menu>
</template>
```
<!-- prettier-ignore-end -->

## Design

Use `lightning-menu-item` within [`lightning-button-menu`](/docs/platform/lightning-component-reference/guide/lightning-button-menu.html), which implements the menus blueprint in the Salesforce Lightning Design System (SLDS).
The menus adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Menus](https://v1.lightningdesignsystem.com/components/menus/)                                                                       | [Menus](https://www.lightningdesignsystem.com/components/menus/)                                                |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Multi-select Menus

To implement a multi-select menu, use the `checked` attribute. The following
JavaScript example handles selection via the `onselect` event on
the `lightning-button-menu` component. Selecting a menu item applies the
selected state to that item.

```javascript
handleSelect (event) {
        const selectedItemValue = event.detail.value;
        const menuItem = this.privateMenuItems.find(function(item) {
            return item.value === selectedItemValue;
        });

        menuItem.checked = !menuItem.checked;
    }
```

## Add Icons to Menu Items

Use the `icon-name` attribute to add an icon after the text of the menu item.
Use the `prefix-icon-name` attribute to add an icon before the text of the menu
item.

This example displays an icon in grayscale before the menu item text.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-button-menu>
        <lightning-menu-item prefix-icon-name="utility:user" label="Menu item">
        </lightning-menu-item>
        <lightning-menu-item label="Another menu item"> </lightning-menu-item>
    </lightning-button-menu>
</template>
```
<!-- prettier-ignore-end -->

## Add Icons with Background Colors

The [SLDS action and object icons](https://v1.lightningdesignsystem.com/icons/) (standard and custom) have background colors. However, when you use these icons in menu items, the colors aren't shown by default.

To specify icons with a background color in menu items, use the `icon-type` attribute. The `icon-type` attribute accepts two values.

- `standard` (default): Sets the icon on the menu item in grayscale.
- `color`: Sets the icon on the menu item with a background color. Action icons and object icons display a white glyph on a colored background that's defined in [SLDS](https://v1.lightningdesignsystem.com/icons/#standard). Doctype and utility icons don't display with a background color.

To enable colored icons and backgrounds, use the `icon-type="color"` attribute. In this example, the `standard:event` icon specifies a background color and the `utility:settings` icon is in grayscale.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-button-menu>
        <lightning-menu-item
            prefix-icon-name="standard:event"
            icon-type="color"
            label="Standard icon with icon-type color">
        </lightning-menu-item>
        <lightning-menu-item
            icon-name="utility:settings"
            icon-type="color"
            label="Utility icon with icon-type color">
        </lightning-menu-item>
    </lightning-button-menu>
</template>
```
<!-- prettier-ignore-end -->

Setting `icon-type="color"` assigns the menu items with icons using their full color schemes, including any associated background colors. Remember that the appearance of icons can still be subject to the overall theme and styling of your Salesforce org or Lightning application.

You can find a comprehensive list of all available icons and their appearances at the [Lightning Design System Icons page](http://lightningdesignsystem.com/icons/).

## Use URLs in Menu Items

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-button-menu>
        <lightning-menu-item
            href="https://www.google.com"
            label="A linked menu item"
        >
        </lightning-menu-item>
    </lightning-button-menu>
</template>
```
<!-- prettier-ignore-end -->

If you don't provide a target, the link opens in the same frame or browser tab where it was clicked, which is the browser's default behavior.
To open the link in a new browser tab, set `target="_blank"`.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-button-menu>
        <lightning-menu-item
            href="https://www.google.com"
            target="_blank"
            label="A linked menu item"
        >
        </lightning-menu-item>
    </lightning-button-menu>
</template>
```
<!-- prettier-ignore-end -->

## Draft Indicators

Use the `is-draft` and `draft-alternative-text` 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 `is-draft` is `true`. The
`draft-alternative-text` attribute is required to provide text describing the
reason the item is considered in a draft state. The draft state can be used
to show that there's' unsaved state or data that could be lost, for example if
there's a user change in a customizable menu.


:::::

:::::tab
::component-specification{component="menuItem" model="lwc" namespace="lightning"}

:::::

::::::