A ui:menu component contains a trigger and list items. You can wire up list items to actions in a client-side controller so that selection of the item triggers an action. This example shows a menu with list items, which when pressed updates the label on the trigger.
<ui:menu> <ui:menuTriggerLink aura:id="trigger" label="Opportunity Status"/> <ui:menuList class="actionMenu" aura:id="actionMenu"> <ui:actionMenuItem aura:id="item1" label="Any" click="{!c.updateTriggerLabel}"/> <ui:actionMenuItem aura:id="item2" label="Open" click="{!c.updateTriggerLabel}" disabled="true"/> <ui:actionMenuItem aura:id="item3" label="Closed" click="{!c.updateTriggerLabel}"/> <ui:actionMenuItem aura:id="item4" label="Closed Won" click="{!c.updateTriggerLabel}"/> </ui:menuList> </ui:menu>
This client-side controller updates the trigger label when a menu item is clicked.
({ updateTriggerLabel: function(cmp, event) { var triggerCmp = cmp.find("trigger"); if (triggerCmp) { var source = event.getSource(); var label = source.get("v.label"); triggerCmp.set("v.label", label); } } })
The dropdown menu and its menu items are hidden by default. You can change this by setting the visible attribute on the ui:menuList component to true. The menu items are shown only when you click the ui:menuTriggerLink component.
This example shows several ways to create a menu.
<aura:component access="global"> <aura:attribute name="status" type="String[]" default="Open, Closed, Closed Won, Any"/> <ui:menu> <ui:menuTriggerLink aura:id="trigger" label="Single selection with actionable menu item"/> <ui:menuList class="actionMenu" aura:id="actionMenu"> <aura:iteration items="{!v.status}" var="s"> <ui:actionMenuItem label="{!s}" click="{!c.updateTriggerLabel}"/> </aura:iteration> </ui:menuList> </ui:menu> <hr/> <ui:menu> <ui:menuTriggerLink class="checkboxMenuLabel" aura:id="checkboxMenuLabel" label="Multiple selection"/> <ui:menuList aura:id="checkboxMenu" class="checkboxMenu"> <aura:iteration aura:id="checkbox" items="{!v.status}" var="s"> <ui:checkboxMenuItem label="{!s}"/> </aura:iteration> </ui:menuList> </ui:menu> <p><ui:button class="checkboxButton" aura:id="checkboxButton" press="{!c.getMenuSelected}" label="Check the selected menu items"/></p> <p><ui:outputText class="result" aura:id="result" value="Which items get selected"/></p> <hr/> <ui:menu> <ui:menuTriggerLink class="radioMenuLabel" aura:id="radioMenuLabel" label="Select a status"/> <ui:menuList class="radioMenu" aura:id="radioMenu"> <aura:iteration aura:id="radio" items="{!v.status}" var="s"> <ui:radioMenuItem label="{!s}"/> </aura:iteration> </ui:menuList> </ui:menu> <p><ui:button class="radioButton" aura:id="radioButton" press="{!c.getRadioMenuSelected}" label="Check the selected menu items"/></p> <p><ui:outputText class="radioResult" aura:id="radioResult" value="Which items get selected"/> </p> <hr/> <div style="margin:20px;"> <div style="display:inline-block;width:50%;vertical-align:top;"> Combination menu items <ui:menu> <ui:menuTriggerLink aura:id="mytrigger" label="Select Menu Items"/> <ui:menuList> <ui:actionMenuItem label="Red" click="{!c.updateLabel}" disabled="true"/> <ui:actionMenuItem label="Green" click="{!c.updateLabel}"/> <ui:actionMenuItem label="Blue" click="{!c.updateLabel}"/> <ui:actionMenuItem label="Yellow United" click="{!c.updateLabel}"/> <ui:menuItemSeparator/> <ui:checkboxMenuItem label="A"/> <ui:checkboxMenuItem label="B"/> <ui:checkboxMenuItem label="C"/> <ui:checkboxMenuItem label="All"/> <ui:menuItemSeparator/> <ui:radioMenuItem label="A only"/> <ui:radioMenuItem label="B only"/> <ui:radioMenuItem label="C only"/> <ui:radioMenuItem label="None"/> </ui:menuList> </ui:menu> </div> </div> </aura:component>
({ updateTriggerLabel: function(cmp, event) { var triggerCmp = cmp.find("trigger"); if (triggerCmp) { var source = event.getSource(); var label = source.get("v.label"); triggerCmp.set("v.label", label); } }, updateLabel: function(cmp, event) { var triggerCmp = cmp.find("mytrigger"); if (triggerCmp) { var source = event.getSource(); var label = source.get("v.label"); triggerCmp.set("v.label", label); } }, getMenuSelected: function(cmp) { var menuItems = cmp.find("checkbox"); var values = []; for (var i = 0; i < menuItems.length; i++) { var c = menuItems[i]; if (c.get("v.selected") === true) { values.push(c.get("v.label")); } } var resultCmp = cmp.find("result"); resultCmp.set("v.value", values.join(",")); }, getRadioMenuSelected: function(cmp) { var menuItems = cmp.find("radio"); var values = []; for (var i = 0; i < menuItems.length; i++) { var c = menuItems[i]; if (c.get("v.selected") === true) { values.push(c.get("v.label")); } } var resultCmp = cmp.find("radioResult"); resultCmp.set("v.value", values.join(",")); } })
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS style to be attached to the component. This style is added in addition to base styles output by the component. |
Event Name | Event Type | Description |
---|---|---|
dblclick | COMPONENT | The event fired when the user double-clicks the component. |
mouseover | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
mouseout | COMPONENT | The event fired when the user moves the mouse pointer away from the component. |
mouseup | COMPONENT | The event fired when the user releases the mouse button over the component. |
mousemove | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
click | COMPONENT | The event fired when the user clicks on the component. |
mousedown | COMPONENT | The event fired when the user clicks a mouse button over the component. |