View in Storybook
Anatomy
By definition, the context menu offers additional actions to a specific list item selected by a user.
- Slots: These are almost always replaced by our ListItem component.
- Divider (optional): Can be added to provide separation to groups of items.
Usage
Context menus are exclusively used to show single-selectable items. It is triggered when a user interacts with a Button, Textfield or other control.
Separation
A divider can be added to help visually differentiate between groups of items
Motion
Each menu has an identical motion when being activated by users. It is offset above the action item and moves down upon reveal.
Best practice
- Consumers can display additional items such as Badge and Button in a list item but be wary of overloading this space. A maximum of 2 is recommended.
- Be conscious of the amount of items in any one menu. Avoid longer than necessary lists of options.
- Separators shoud be incorporated thoughtfully and provide a sensible logic between groups of items.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use when displaying single selectable items. Use our Dropdown if multi-select items are desired. |
🚫 Display a Header or Search within any context menu. |
|
✅ Place destructive actions at the bottom. |
🚫 Add any other component other than ListItem or Divider. |
|
✅ Add an icon indicator when links are external using the isExternal prop. |
|