lightning:buttonMenu (Beta)

Represents a dropdown menu with a list of actions or functions.

A lightning:buttonMenu represents a button that when clicked displays a dropdown menu of actions or functions that a user can access.

Use the variant, size, or class attributes to customize the styling.

This component inherits styling from menus in the Lightning Design System.

Here is an example.

<aura:component>
    <lightning:buttonMenu alternativeText="More options" onselect="{! c.doSomething }">
        <lightning:menuItem label="Menu Item One"   value="1" />
        <lightning:menuItem label="Menu Item Two"   value="2" />
        <lightning:menuItem label="Menu Item Three" value="3" />
        <lightning:menuItem label="Menu Item Four"  value="4" disabled="true" />
    </lightning:buttonMenu>
</aura:component>
        

You can create menu items that can be checked or unchecked using the checked attribute in the lightning:menuItem component.

By default, the menu closes when you click away from it. You can use the visible attribute to open and close the menu. The following example closes the menu and sets the focus on the button element in your client-side controller.

var myMenu = cmp.find("myMenu");
myMenu.set("v.visible", false);
myMenu.focus();
Usage Considerations

This component contains menu items that are created only if the button is triggered. You won't be able to reference the menu items during initialization or if the button isn't triggered yet.

Accessibility

To inform screen readers that a button is disabled, set the disabled attribute to true.

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.
alternativeText String The assistive text for the button.
body ComponentDefRef[] The body of the component.
class String A CSS class for the outer element, in addition to the component's base classes.
disabled Boolean If true, the menu is disabled. Disabling the menu prevents users from opening it. This value defaults to false.
iconName String The name of the icon to be used. In the format \'utility:down\'. This value defaults to utility:down.
iconSize String The size of the icon. Options include xx-small, x-small, medium, or large. This value defaults to medium.
menuAlignment String Determines the alignment of the menu relative to the button. Available options are: left, center, right. This value defaults to left.
name String The name for the button element. This value is optional and can be used to identify the button in a callback.
onblur Action The action triggered when the element releases focus.
onfocus Action The action triggered when the element receives focus.
onselect Action Action fired when a menu item is selected. The 'detail.menuItem' property of the passed event is the selected menu item.
tabindex Integer Specifies the tab order of an element (when the tab button is used for navigating).
title String Tooltip text on the button.
value String The value for the button element. This value is optional and can be used when submitting a form.
variant String The variant changes the look of the button. Accepted variants include bare, container, border, border-filled, bare-inverse, and border-inverse. This value defaults to border.
visible Boolean If true, the menu items are displayed. This value defaults to false.