ui:menu

A dropdown menu list with a trigger that controls its visibility. Need to provide a menuTriggerLink and menuList component.

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 <div style="margin:20px;">
3     <div style="display:inline-block;width:50%;vertical-align:top;">
4         ui:actionMenuItem
5         <ui:menu>
6             <ui:menuTriggerLink aura:id="trigger" label="Select your favorite team"/>
7              <ui:menuList class="actionMenu" aura:id="actionMenu">
8                 <ui:actionMenuItem class="actionItem1" aura:id="actionItem1" label="Bayern Munich" click="{!c.updateTriggerLabel}"/>
9                 <ui:actionMenuItem class="actionItem2" aura:id="actionItem2" label="FC Barcelona" click="{!c.updateTriggerLabel}" disabled="true"/>
10                 <ui:actionMenuItem class="actionItem3" aura:id="actionItem3" label="Inter Milan" click="{!c.updateTriggerLabel}"/>
11                 <ui:actionMenuItem class="actionItem4" aura:id="actionItem4" label="Manchester United" click="{!c.updateTriggerLabel}"/>
12             </ui:menuList>
13         </ui:menu>
14      </div>
15     
16 </div>
17 <hr/>
18 <p/>
19 <div style="margin:20px;">
20     <div style="display:inline-block;width:50%;vertical-align:top;">
21         ui:checkboxMenuItem
22         <ui:menu>
23             <ui:menuTriggerLink class="checkboxMenuLabel" aura:id="checkboxMenuLabel" label="Select your favorite teams"/>
24            <ui:menuList aura:id="checkboxMenu" class="checkboxMenu">
25                 <ui:checkboxMenuItem class="checkboxItem1" aura:id="checkboxItem1" label="San Francisco 49ers"/>
26                 <ui:checkboxMenuItem class="checkboxItem2" aura:id="checkboxItem2" label="Seattle Seahawks"/>
27                 <ui:checkboxMenuItem class="checkboxItem3" aura:id="checkboxItem3" label="St. Louis Rams"/>
28                 <ui:checkboxMenuItem class="checkboxItem4" aura:id="checkboxItem4" label="Arizona Cardinals" disabled="true" selected="true"/>
29             </ui:menuList>
30         </ui:menu>
31         <p><ui:button class="checkboxButton" aura:id="checkboxButton" press="{!c.getMenuSelected}" label="Check the selected menu items"/></p>
32          <p><ui:outputText class="result" aura:id="result" value="Which items get selected"/></p>
33       </div>
34 </div>
35 <hr/>
36 <p/>
37 <div style="margin:20px;">
38     <div style="display:inline-block;width:50%;vertical-align:top;">
39         ui:radioMenuItem
40         <ui:menu>
41             <ui:menuTriggerLink class="radioMenuLabel" aura:id="radioMenuLabel" label="Select a team"/>
42             <ui:menuList class="radioMenu" aura:id="radioMenu">
43                 <ui:radioMenuItem class="radioItem1" aura:id="radioItem1" label="San Francisco"/>
44                 <ui:radioMenuItem class="radioItem2" aura:id="radioItem2" label="LA Dodgers"/>
45                 <ui:radioMenuItem class="radioItem3" aura:id="radioItem3" label="Arizona"/>
46                 <ui:radioMenuItem class="radioItem4" aura:id="radioItem4" label="Diego" disabled="true"/>
47                 <ui:radioMenuItem class="radioItem5" aura:id="radioItem5" label="Colorado"/>
48             </ui:menuList>
49         </ui:menu>
50        <p><ui:button class="radioButton" aura:id="radioButton" press="{!c.getRadioMenuSelected}" label="Check the selected menu items"/></p>
51         <p><ui:outputText class="radioResult" aura:id="radioResult" value="Which items get selected"/> </p>
52        </div>
53 </div>
54 <hr/>
55 <p/>
56 <div style="margin:20px;">
57     <div style="display:inline-block;width:50%;vertical-align:top;">
58         Combination menu items
59         <ui:menu>
60             <ui:menuTriggerLink aura:id="mytrigger" label="Select teams"/>
61             <ui:menuList>
62                 <ui:actionMenuItem label="Bayern Munich" click="{!c.updateLabel}"/>
63                 <ui:actionMenuItem label="FC Barcelona" click="{!c.updateLabel}"/>
64                 <ui:actionMenuItem label="Inter Milan" click="{!c.updateLabel}"/>
65                 <ui:actionMenuItem label="Manchester United" click="{!c.updateLabel}"/>
66                 <ui:menuItemSeparator/>
67                 <ui:checkboxMenuItem label="San Francisco 49ers"/>
68                 <ui:checkboxMenuItem label="Seattle Seahawks"/>
69                 <ui:checkboxMenuItem label="St. Louis Rams"/>
70                 <ui:checkboxMenuItem label="Arizona Cardinals"/>
71                 <ui:menuItemSeparator/>
72                 <ui:radioMenuItem label="San Francisco"/>
73                 <ui:radioMenuItem label="LA Dodgers"/>
74                 <ui:radioMenuItem label="Arizona"/>
75                 <ui:radioMenuItem label="San Diego"/>
76                 <ui:radioMenuItem label="Colorado"/>
77             </ui:menuList>
78         </ui:menu>
79       </div>
80 </div>
81</aura:component>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    updateTriggerLabel: function(cmp, event) {
19        var triggerCmp = cmp.find("trigger");
20        if (triggerCmp) {
21            var source = event.getSource();
22            var label = source.get("v.label");
23            triggerCmp.set("v.label", label);
24        }
25    },
26    updateLabel: function(cmp, event) {
27        var triggerCmp = cmp.find("mytrigger");
28        if (triggerCmp) {
29            var source = event.getSource();
30            var label = source.get("v.label");
31            triggerCmp.set("v.label", label);
32        }
33    },
34    getMenuSelected: function(cmp, event) {
35        var menuCmp = cmp.find("checkboxMenu");
36        var menuItems = menuCmp.get("v.childMenuItems");
37        var values = [];
38        for (var i = 0; i < menuItems.length; i++) {
39            var c = menuItems[i];
40            if (c.get("v.selected") === true) {
41                values.push(c.get("v.label"));
42            }
43        }
44        var resultCmp = cmp.find("result");
45        resultCmp.set("v.value", values.join(","));
46    },
47    getRadioMenuSelected: function(cmp, event) {
48        var menuCmp = cmp.find("radioMenu");
49        var menuItems = menuCmp.get("v.childMenuItems");
50        var values = [];
51        for (var i = 0; i < menuItems.length; i++) {
52            var c = menuItems[i];
53            if (c.get("v.selected") === true) {
54                values.push(c.get("v.label"));
55            }
56        }
57        var resultCmp = cmp.find("radioResult");
58        resultCmp.set("v.value", values.join(","));
59    }
60})
61

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
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.

Lightning Components Developer’s Guide

ui:menu

Attributes

Events