Menus are used to display multiple related actions or navigation links in an overlaid container.

Contents

Menus contain vertical lists of items. These items can trigger actions, or navigate to other pages. Each item should succinctly indicate its purpose with text and an optional icon.

Complements

UIMenu is used inside some other components to display multiple actions. These include UIDefaultActionMenu and UIDropdownButton.

Alternatives

Menus are not for selecting between multiple values. For dropdown selectors, use UISelectChildren.

‍

1. Menu Container

The menu container marks the boundary of the component. Clicking outside of this area will close the menu.

2. Menu Item

Each menu item appears as a row in a vertical list.

3. Menu Item Icon (optional)

Menu items may have a left-aligned icon if desired. Icons should either be used for all menu items, or for none.‍

4. Divider

Dividers can be used to separate menu items into more logical clusters. This may be to isolate negative actions (e.g. Delete), or to make other logical groupings based on the function of each item. Avoid having multiple sections with only a single menu item.

‍

Menus are interactive components that can be opened and closed, with contents that can be pressed to perform an action or navigate to a link.

Opening

Menus are opened by clicking on the triggering element, usually a button of some type (text button, icon button, etc.)

Closing

Menus are closed by clicking anywhere outside of the menu bounds, or by clicking again on the element that triggered the menu to open.

‍