Menus

A menu is a drop-down list with a trigger that controls its visibility. You must provide the trigger and list of menu items. The drop-down 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:

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:menu>
18    <ui:menuTriggerLink aura:id="trigger" label="Opportunity Status"/>
19        <ui:menuList class="actionMenu" aura:id="actionMenu">
20              <ui:actionMenuItem aura:id="item2" label="Open" click="{!c.updateTriggerLabel}"/>
21              <ui:actionMenuItem aura:id="item3" label="Closed" click="{!c.updateTriggerLabel}"/>
22              <ui:actionMenuItem aura:id="item4" label="Closed Won" click="{!c.updateTriggerLabel}"/>
23        </ui:menuList>
24</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.