A menu presents a list of menu items that a user can choose to perform an action with. This component includes a menu trigger (a button in our case) and a menu comprising of menu items that are shown upon actioning the trigger. A menu item can be used to perform an action, a page navigation or show a sub menu.
Each menu item can only perform a single action.
Do not nest multiple actions within a menu item
Please do not add additional actionable elements inside a menu item. They will not be keyboard accessible.
When the user is focused on a menu trigger, the following keyboard interactions apply:
- Enter and space open the menu and select the current menu item
- Up and down arrows move the user between the menu items
- Disabled menu items, separators, and group labels are never focused
Use MenuGroups to create hierarchy or logical groupings within longer menus. MenuGroups have a visible group label that should describe the grouping clearly. They can be given a prefix icon; please only use icons in a decorative manner and make the label descriptive standalone.
Add separators between MenuGroups and other menu items.
The MenuButton is the standard Paste Button with some extra functionality. As a result it takes all the usual props the Paste Button takes, meaning you have full access to all the variants and styling options.
For example, you can create an icon button menu trigger like so:
Menu items come with the ability to be selected, in the same way as a checkbox or radio button. This is useful when a user is asked to perform a persistent action, where the selection should be preserved for future reference. Selections can either be single, or multiple, just like radio and checkboxes.
Paste provides a few composed variants of the Menu component. These compositions are designed to help you build menus for common scenarios and use cases.
Using a Badge to contain a menu trigger can be useful when you want display a dynamic identifier. A example use case might be an account, or availability of an agent.
The <MenuBadge /> accepts all the variants that a badge does: neutral, success, warning, error, new, subaccount, decorative10, decorative20, decorative30, decorative40, neutral_counter, error_counter
A menu item can perform 2 basic tasks:
- trigger an action (switching a view between grid and list)
- trigger a page navigation (going to a new page)
To do so, either set href with a valid url to go to a new page, or set the onClick as an event handler on the MenuItem.
Menu item labels should be concise, usually fewer than 20 characters.
Use words that are familiar to users so it's immediately clear what the menu item does.
Each menu item should be constructed similarly so they are "parallel." For example, the menu items "Edit" and "Copy" are parallel.
Use the variant prop in MenuItem to use a default or destructive item.