ui:menuList | Lightning Components Developer Guide

This component is nested in a ui:menu component and can be used together with a ui:menuTriggerLink component. Clicking the menu trigger displays the container with menu items.

1<ui:menu>
2    <ui:menuTriggerLink aura:id="trigger" label="Click me to display menu items"/>
3    <ui:menuList class="actionMenu" aura:id="actionMenu">
4        <ui:actionMenuItem aura:id="item1" label="Item 1" click="{!c.doSomething}"/>
5        <ui:actionMenuItem aura:id="item2" label="Item 2" click="{!c.doSomething}"/>
6        <ui:actionMenuItem aura:id="item3" label="Item 3" click="{!c.doSomething}"/>
7        <ui:actionMenuItem aura:id="item4" label="Item 4" click="{!c.doSomething}"/>
8   </ui:menuList>
9</ui:menu>

ui:menuList can contain these components, which runs a client-side controller when clicked:

ui:actionMenuItem
ui:checkboxMenuItem
ui:radioMenuItem
ui:menuItemSeparator

See ui:menu for more information.

Attributes

Attribute Name	Attribute Type	Description
`autoPosition`	Boolean	Move the popup target up when there is not enough space at the bottom to display. Note: even if autoPosition is set to false, popup will still position the menu relative to the trigger. To override default positioning, use manualPosition attribute.
`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.
`closeOnClickOutside`	Boolean	Close target when user clicks or taps outside of the target
`closeOnTabKey`	Boolean	Indicates whether to close the target list on tab key or not.
`curtain`	Boolean	Whether or not to apply an overlay under the target.
`menuItems`	List	A list of menu items set explicitly using instances of the Java class: aura.components.ui.MenuItem.
`visible`	Boolean	Controls the visibility of the menu. The default is false, which hides the menu.

Events

Event Name	Event Type	Description
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`click`	COMPONENT	Indicates that a component has been clicked.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`expand`	COMPONENT	Indicates that a component expands.
`menuSelect`	COMPONENT	Indicates that the user selects a menu item inside a menu component.
`collapse`	COMPONENT	Indicates that a component collapses.
`menuFocusChange`	COMPONENT	Indicates that the user changes menu item focus inside a menu component.