Newer Version Available
ui:menuList
A menu component that contains menu items.
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 | Required? |
|---|---|---|---|
| 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 | The event fired when the user double-clicks the component. |
| mouseover | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
| mouseout | COMPONENT | The event fired when the user moves the mouse pointer away from the component. |
| mouseup | COMPONENT | The event fired when the user releases the mouse button over the component. |
| mousemove | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
| click | COMPONENT | The event fired when the user clicks on the component. |
| mousedown | COMPONENT | The event fired when the user clicks a mouse button over the component. |
| menuExpand | COMPONENT | The event fired when the menu list displays. |
| menuSelect | COMPONENT | The event fired when the user select a menu item. |
| menuCollapse | COMPONENT | The event fired when the menu list collapses. |
| menuFocusChange | COMPONENT | The event fired when the menu list focus changed from one menuItem to another menuItem. |