ui:menu | Lightning Components Developer Guide

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.

1<ui:menu>
2    <ui:menuTriggerLink aura:id="trigger" label="Opportunity Status"/>
3        <ui:menuList class="actionMenu" aura:id="actionMenu">
4              <ui:actionMenuItem aura:id="item1" label="Any" click="{!c.updateTriggerLabel}"/>
5              <ui:actionMenuItem aura:id="item2" label="Open" click="{!c.updateTriggerLabel}" disabled="true"/>
6              <ui:actionMenuItem aura:id="item3" label="Closed" click="{!c.updateTriggerLabel}"/>
7              <ui:actionMenuItem aura:id="item4" label="Closed Won" click="{!c.updateTriggerLabel}"/>
8          </ui:menuList>
9</ui:menu>

This client-side controller updates the trigger label when a menu item is clicked.

1({
2    updateTriggerLabel: function(cmp, event) {
3        var triggerCmp = cmp.find("trigger");
4        if (triggerCmp) {
5            var source = event.getSource();
6            var label = source.get("v.label");
7            triggerCmp.set("v.label", label);
8        }
9    }
10})

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.

To use a trigger, which opens the menu, nest the ui:menuTriggerLink component in ui:menu. For list items, use the ui:menuList component, and include any of these list item components that can trigger a client-side controller action:

ui:actionMenuItem - A menu item
ui:checkboxMenuItem - A checkbox that supports multiple selections
ui:radioMenuItem - A radio item that supports single selection

To include a separator for these menu items, use ui:menuItemSeparator.

This example shows several ways to create a menu.

1<aura:component access="global">
2    <aura:attribute name="status" type="String[]" default="Open, Closed, Closed Won, Any"/>
3        <ui:menu>
4            <ui:menuTriggerLink aura:id="trigger" label="Single selection with actionable menu item"/>
5            <ui:menuList class="actionMenu" aura:id="actionMenu">
6                <aura:iteration items="{!v.status}" var="s">
7                    <ui:actionMenuItem label="{!s}" click="{!c.updateTriggerLabel}"/>
8                </aura:iteration>
9            </ui:menuList>
10        </ui:menu>
11        <hr/>
12        <ui:menu>
13        <ui:menuTriggerLink class="checkboxMenuLabel" aura:id="checkboxMenuLabel" label="Multiple selection"/>
14           <ui:menuList aura:id="checkboxMenu" class="checkboxMenu">
15            <aura:iteration aura:id="checkbox" items="{!v.status}" var="s">
16                <ui:checkboxMenuItem label="{!s}"/>
17                </aura:iteration>
18            </ui:menuList>
19        </ui:menu>
20         <p><ui:button class="checkboxButton" aura:id="checkboxButton" press="{!c.getMenuSelected}" label="Check the selected menu items"/></p>
21          <p><ui:outputText class="result" aura:id="result" value="Which items get selected"/></p>
22 <hr/>
23         <ui:menu>
24             <ui:menuTriggerLink class="radioMenuLabel" aura:id="radioMenuLabel" label="Select a status"/>
25             <ui:menuList class="radioMenu" aura:id="radioMenu">
26                    <aura:iteration aura:id="radio" items="{!v.status}" var="s">
27                     <ui:radioMenuItem label="{!s}"/>
28                    </aura:iteration>
29             </ui:menuList>
30         </ui:menu>
31        <p><ui:button class="radioButton" aura:id="radioButton" press="{!c.getRadioMenuSelected}" label="Check the selected menu items"/></p>
32         <p><ui:outputText class="radioResult" aura:id="radioResult" value="Which items get selected"/> </p>
33 <hr/>
34 <div style="margin:20px;">
35     <div style="display:inline-block;width:50%;vertical-align:top;">
36         Combination menu items
37         <ui:menu>
38             <ui:menuTriggerLink aura:id="mytrigger" label="Select Menu Items"/>
39             <ui:menuList>
40                 <ui:actionMenuItem label="Red" click="{!c.updateLabel}" disabled="true"/>
41                 <ui:actionMenuItem label="Green" click="{!c.updateLabel}"/>
42                 <ui:actionMenuItem label="Blue" click="{!c.updateLabel}"/>
43                 <ui:actionMenuItem label="Yellow United" click="{!c.updateLabel}"/>
44                 <ui:menuItemSeparator/>
45                 <ui:checkboxMenuItem label="A"/>
46                 <ui:checkboxMenuItem label="B"/>
47                 <ui:checkboxMenuItem label="C"/>
48                 <ui:checkboxMenuItem label="All"/>
49                 <ui:menuItemSeparator/>
50                 <ui:radioMenuItem label="A only"/>
51                 <ui:radioMenuItem label="B only"/>
52                 <ui:radioMenuItem label="C only"/>
53                 <ui:radioMenuItem label="None"/>
54             </ui:menuList>
55         </ui:menu>
56       </div>
57 </div>
58</aura:component>

1({
2    updateTriggerLabel: function(cmp, event) {
3        var triggerCmp = cmp.find("trigger");
4        if (triggerCmp) {
5            var source = event.getSource();
6            var label = source.get("v.label");
7            triggerCmp.set("v.label", label);
8        }
9    },
10    updateLabel: function(cmp, event) {
11        var triggerCmp = cmp.find("mytrigger");
12        if (triggerCmp) {
13            var source = event.getSource();
14            var label = source.get("v.label");
15            triggerCmp.set("v.label", label);
16        }
17    },
18    getMenuSelected: function(cmp) {
19        var menuItems = cmp.find("checkbox");
20        var values = [];
21        for (var i = 0; i < menuItems.length; i++) {
22            var c = menuItems[i];
23            if (c.get("v.selected") === true) {
24                values.push(c.get("v.label"));
25            }
26        }
27        var resultCmp = cmp.find("result");
28        resultCmp.set("v.value", values.join(","));
29    },
30    getRadioMenuSelected: function(cmp) {
31        var menuItems = cmp.find("radio");
32        var values = [];
33        for (var i = 0; i < menuItems.length; i++) {
34            var c = menuItems[i];
35            if (c.get("v.selected") === true) {
36                values.push(c.get("v.label"));
37            }
38        }
39        var resultCmp = cmp.find("radioResult");
40        resultCmp.set("v.value", values.join(","));
41    }
42})

Attributes

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.

Events

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.