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();
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.
AccessibilityTo inform screen readers that a button is disabled, set the disabled attribute to true.
MethodsThis 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. | |
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. |