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.

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