Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage
Best Practices
- Use the Context menu to be attached to a single element and display secondary commands.
- Avoid using gear icons (⚙) or hamburger-menu icons (≣) to represent contextual menus. Users might recognize these as elements that trigger global menus and settings, rather than narrower, task-focused commands.
- Keep the items menu list length manageable by, when possible, including maximum 10 items, to avoid choice overload and ensure that all contextual options are visible without having to scroll.
- Place the menu options used most often at the top to help users focus on the most relevant options
- Actions that could cause a significant change to the user’s data (delete app, delete service, etc.) live below the primary set of actions.
Do’s and Don’ts
Position Menus correctly
If the Context Menu button is on the edge of the screen make sure to use the right position for the menu so the screen doesn’t cut the menu or even reposition the menu in Responsive screens.
Do
Reposition the menu as needed especially in responsive screens.
Don't
Make the screen cut the menu when the user changes the size of the screen or in any situation.
Context menu in Data tables
We highly recommend using the context menu column as the last column in the Data Table.
Do
Use the Context Menu Column as the last column in the data table.
Don't
Avoid putting the Context Menu Column in the middle of other columns.
Keep all the Context Menu cells in the same row and don’t mix them with other cells.
Do
Use the Context Menu row to keep all the Context Menu together.
Don't
Avoid putting Context Menu Cells mixed with other cells.
Context Menu for the Data Table are actions to be applied to the entire row if you need to have a menu of actions for a specific cell you can use Flyout Menus.
Do
Use the Context Menu row to keep all the Context Menu together.
Don't
Avoid using Context Menu for individual cells.
Related Components & Patterns