Menu (Deprecated)

We recommend using Lightning Web Components whenever possible. When migrating to Lightning Web Components, use lightning-button-menu.

For more information, see Aura Components in the ui Namespace Are Deprecated.

A ui:menu component contains a trigger and list items. To apply Lightning Design System styling, we recommend that you use lightning:buttonMenu instead of ui:menu.

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

To include a separator for these menu items, use ui:menuItemSeparator.