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.
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.
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.
