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:

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="item2" label="Open" click="{!c.updateTriggerLabel}"/>
5              <ui:actionMenuItem aura:id="item3" label="Closed" click="{!c.updateTriggerLabel}"/>
6              <ui:actionMenuItem aura:id="item4" label="Closed Won" click="{!c.updateTriggerLabel}"/>
7        </ui:menuList>
8</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.