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.

<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.

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.

<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 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 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 menuCmp = cmp.find("checkboxMenu");
        var menuItems = menuCmp.get("v.childMenuItems");
        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 menuCmp = cmp.find("radioMenu");
        var menuItems = menuCmp.get("v.childMenuItems");
        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(","));
    }
})

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.