Lightning Components Developer Guide
jNewer Version Available
ui:menu
A dropdown menu list with a trigger that controls its visibility. To create a clickable link and menu items, use ui:menuTriggerLink and and ui:menuList component.
A ui:menu component contains a trigger and list items. You can wire up list items to actions in a client-side controller so that selection of the item triggers an action. This example shows a menu with list items, which when pressed updates the label on the trigger.
This client-side controller updates the trigger label when a menu item is clicked.
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.
To use a trigger, which opens the menu, nest the ui:menuTriggerLink component in ui:menu. For list items, use the ui:menuList component, and include any of these
list item components that can trigger a client-side controller action:
- ui:actionMenuItem - A menu item
- ui:checkboxMenuItem - A checkbox that supports multiple selections
- ui:radioMenuItem - A radio item that supports single selection
This example shows several ways to create a menu.
Attributes
| Attribute Name | Attribute Type | Description | Required? |
|---|---|---|---|
| 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. |
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. |