Menu

A Menu is a set of actions that may be used to engage with content on a page or to navigate to other pages. When a menu item is clicked, the action will be executed.

Menu should not be confused with Select. Though visually similar, Select is often used in the context of a Form and used to choose from a set of values rather than actions.

To create a predictable experience for users, the following are guidelines for using Menu.

It is recommended that you do not have more than 5 items in a menu. In order to create the most effective user experience, keep the number of items to a minimum. This allows the user to easily understand the scope of the actions they can perform.

Give the menu a clear title. Instead of labeling the menu as "Menu", provide a name that conveys its purpose. For example, a label of "Account Information" would be appropriate if the menu items associated were actions such as "Change username" or "Reset password".

Keep labels short. Using a simple, concise label for menu items, such as "Settings" or "Logout", helps the user easily understand the action that will be performed when they click. Longer labels may clutter the layout and create a more effortful experience for the user.

Avoid creating cascading menus. Menus with multiple layers creates a confusing experience for the user because relevant actions may become nested and difficult to find. Refining menu items to necessary actions creates a more manageable user experience.

Accessibility features such as screen reader messages are automatically built into Menu. By default, these messages are "Open Menu" and "Close Menu". However, if a more specific message is necessary, a custom a11yTitle or messages may be applied.

An icon can be used on a menu item to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu item is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of Menu with custom icon demonstrate when an icon only may be sufficient.

Allow a user to quickly locate the menu item they desire by organizing menu items through thoughtful ordering and grouping.

• Make it easy for the user to scan by grouping related items and placing more frequently used actions at the top of the menu.
• Ensure intentionality, by placing destructive actions in a distinct, consistent location at the end of the menu.

Group related menu items. Use separator lines to create visually distinct groups of related menu items.

Create separate groups for menu items initiating actions and items setting attributes. Menu items become unpredictable when the behavior of grouped items varies.

Menu items should only be grouped if there are two or more related items.

Frequency of use should guide the order in which menu items are presented.

When menu items are grouped, order items within that group by frequency. Additionally, place the most frequently used group at the top of the menu. This anticipates what the user is looking for and allows them to locate the item as their eye scans the items top to bottom.

Exception: Dangerous actions should be placed as the last item in the menu.

Dangerous or destructive actions altering a state which cannot be recovered, such as delete, should be placed as the last item in the menu with a visual separator for the dangerous actions grouping so that they are distinct from all other actions.

Selecting a dangerous action should lead to double confirmation.

Many HPE applications provide the ability for customers to configure, modify, and act upon resources in their environment.

For applications in this context, groups of menu items can be thought of as configuring, executing, or transferring.

Actions allowing a user to set and modify attributes of a resource.

• View [resource] details
• Edit [resource]
• Add [item] to [resource]
• Remove [item] from [resource]
• Assign [resource] to [another resource]
• Add [resource] to group

Actions providing the ability for a user to act upon a resource.

• Launch [resource]
• Power on/off [resource]
• Reset [resource]
• Update/upgrade software/firmware version for [resource]

Actions enabling a user to share or consume data related to a resource.

• Download [resource] data
• Share [resource] with [user]
• Send [resource] to [user]
• Notify [user] about [resource]

The table menu's batch actions are grouped by executing and configuration actions. The executing actions group is ordered first because the actions in it are the most frequently used.

Each server group has a menu whose actions have been grouped by configuration, executing, and dangerous actions. The configuration actions group is ordered first because adjusting and viewing the group are the most frequently used. The delete group action is ordered last since deleting the group is a destructive action and cannot be recovered.

There are various places a Menu may be useful within an application. If the user is going to be selecting from a list of options to execute an action, Menu is a good component to use. The usage of labels and icons allow a menu to be versatile for different layout contexts.

A menu can be used in a Header to group related actions. The default Menu should be used in all instances unless the Menu is contained within a toolbar, in which case see Menu within a toolbar guidance.

Use kind="toolbar" when the Menu is placed in row with other toolbar controls like search or filter. In this situation, a search input, filter button, and action menu are presented as a unified set of controls. The intent is to present each control with equal prominence.

Adding an icon prop changes the icon that appears on the menu. In some contexts, it may be appropriate to use a more specific or alternate icon. Here is an example Menu being used in a List to indicate actions that can be performed on list items.

Used to indicate that a Menu cannot be interacted with.