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

You can display a list of items from an object. This example displays a list of contact names in a menu using aura:iteration.

1<aura:component>
2    <aura:attribute name="contacts" type="String[]" default="All,Primary,Secondary"/>
3    <ui:menu>
4        <ui:menuTriggerLink label="Select Contact"/>
5        <ui:menuList>
6            <aura:iteration var="contact" items="{!v.contacts}">
7                <ui:actionMenuItem label="{!contact}"/>
8            </aura:iteration>
9        </ui:menuList>
10    </ui:menu>
11</aura:component>

The following components are nested in ui:menu.

Component	Description
`ui:menu`	A drop-down list with a trigger that controls its visibility
`ui:menuList`	A list of menu items
`ui:actionMenuItem`	A menu item that triggers an action
`ui:checkboxMenuItem`	A menu item that supports multiple selection and can be used to trigger an action
`ui:radioMenuItem`	A menu item that supports single selection and can be used to trigger an action
`ui:menuItemSeparator`	A visual separator for menu items
`ui:menuItem`	An abstract and extensible component for menu items in a `ui:menuList` component
`ui:menuTrigger`	A trigger that expands and collapses a menu
`ui:menuTriggerLink`	A link that triggers a dropdown menu. This component extends `ui:menuTrigger`

Lightning Components Developer’s Guide

No Results

Menus