Menus

A menu is a dropdown list with a trigger that controls its visibility. You must provide the trigger, which displays a text label, and a list of menu items. 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 code creates a menu with several items:

<ui:menu>
    <ui:menuTriggerLink aura:id="trigger" label="Opportunity Status"/>
        <ui:menuList class="actionMenu" aura:id="actionMenu">
              <ui:actionMenuItem aura:id="item2" label="Open" click="{!c.updateTriggerLabel}"/>
              <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>

Different menus achieve different goals. Make sure you use the right menu for the desired behavior. The three types of menus are:

Actions
Use the ui:actionMenuItem for items that create an action, like print, new, or save.
Radio button
If you want users to pick only one from a list several items, use ui:radioMenuItem.
Checkbox style
If users can pick multiple items from a list of several items, use ui:checkboxMenuItem. Checkboxes can also be used to turn one item on or off.
Note

Note

To create a dropdown menu with a trigger that’s a button, use lightning:buttonMenu instead.