Using this Component
Menus are used to display multiple related actions or navigation links in an overlaid container.
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.
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.
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.
Menus are opened by clicking on the triggering element, usually a button of some type (text button, icon button, etc.)
Menus are closed by clicking anywhere outside of the menu bounds, or by clicking again on the element that triggered the menu to open.