Context Menu
The menu appears by default on right-click, or it can appear on left-click. On a touch device, a long press opens the context menu. Below is a default example:
<ContextMenu items={items}>
<Grid items={people} allRowsVisible>
<GridColumn path="firstName" />
<GridColumn path="lastName" />
<GridColumn path="email" />
<GridColumn header="Phone number" path="address.phone" />
</Grid>
</ContextMenu>
Dividers
You can use dividers to separate and group related content. Use dividers sparingly to avoid creating unnecessary visual clutter.
Hierarchical Menu
Context Menu, like Menu Bar, supports multi-level sub-menus. You can use a hierarchical menu to organize a large set of options and group related items.
Left-Click
You can use left-click to open Context Menu in situations where left-click has no other function. An example of such a situation would be a Grid without selection support.
Best Practices
Context Menu is used to offer shortcuts to the user. You shouldn’t use it as the only or primary means to complete a task. The primary way should be accessible elsewhere in the UI.
Context Menu vs. Menu Bar
You should use Context Menu when there is no dedicated button for opening an overlay menu, such as right-clicking a grid row. When there is a dedicated element or component, such as an overflow menu, use Menu Bar.
Related Components
Component | Usage Recommendation |
---|---|
Component for displaying a horizontal menu with multi-level sub-menus. |
Important
| You can find more information in the corresponding article on vaadin.com. |