ui:menu

A dropdown menu list with a trigger that controls its visibility. To create a clickable link and menu items, use ui:menuTriggerLink and and ui:menuList component.

A ui:menu component contains a trigger and list items. To apply Lightning Design System styling, we recommend that you use lightning:buttonMenu instead of ui:menu.

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 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. To apply Lightning Design System styling, we recommend that you use lightning:buttonMenu instead of ui: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 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 aura:id="checkboxMenuLabel" label="Multiple selection"/>
           <ui:menuList aura:id="checkboxMenu">
            <aura:iteration aura:id="checkbox" items="{!v.status}" var="s">
                <ui:checkboxMenuItem label="{!s}"/>
                </aura:iteration>
            </ui:menuList>
        </ui:menu>
         <p><ui:button aura:id="checkboxButton" press="{!c.getMenuSelected}" label="Check the selected menu items"/></p>
          <p><ui:outputText aura:id="result" value="Which items get selected"/></p>
 <hr/>
         <ui:menu>
             <ui:menuTriggerLink aura:id="radioMenuLabel" label="Select a status"/>
             <ui:menuList 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 aura:id="radioButton" press="{!c.getRadioMenuSelected}" label="Check the selected menu items"/></p>
         <p><ui:outputText 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(","));
    }
})

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.