Aura Component
Button Menu
Represents a dropdown menu with a list of actions or functions.
Descriptor
lightning:buttonMenuTargets
Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out / Visualforce, Standalone Lightning App
Example Options
Simple Button Menus
Button menu with lightning:menuItem components.
Button menu with some disabled lightning:menuItem components.
Code
<aura:component> <div class="slds-m-top_medium slds-m-bottom_large"> <h2 class="slds-text-heading_small slds-m-bottom_medium"> Button menu with <code>lightning:menuItem</code> components. </h2> <div class="slds-p-around_medium container lgc-bg"> <lightning:buttonMenu alternativeText="Show menu"> <lightning:menuItem value="MenuItemOne" label="Menu Item One" /> <lightning:menuItem value="MenuItemTwo" label="Menu Item Two" /> <lightning:menuItem value="MenuItemThree" label="Menu Item Three" /> <lightning:menuItem value="MenuItemFour" label="Menu Item Four" /> </lightning:buttonMenu> </div> </div> <div class="slds-m-top_medium slds-m-bottom_large"> <h2 class="slds-text-heading_small slds-m-bottom_medium"> Button menu with some disabled <code>lightning:menuItem</code> components. </h2> <div class="slds-p-around_medium container lgc-bg"> <lightning:buttonMenu alternativeText="Show menu"> <lightning:menuItem value="MenuItemOne" label="Menu Item One" /> <lightning:menuItem value="MenuItemTwo" label="Menu Item Two" disabled="true"/> <lightning:menuItem value="MenuItemThree" label="Menu Item Three" /> <lightning:menuItem value="MenuItemFour" label="Menu Item Four" disabled="true"/> </lightning:buttonMenu> </div> </div> </aura:component> 