Context Menu
- Dividers
- Checkable Menu Items
- Hierarchical Menu
- Custom Items
- Disabled Menu Items
- Left-Click
- Best Practices
- Related Components
Context Menu is a component that you can attach to any component to display a context menu. The menu appears on right (default) or left click. On a touch device, a long press opens the context menu.
|
Important
| Open the Context Menu by right-clicking (mouse) or long-pressing (touch) a Grid row. |
new tab
GridContextMenu<Person> menu = grid.addContextMenu();
menu.addItem("View", event -> {});
menu.addItem("Edit", event -> {});
menu.addItem("Delete", event -> {});Dividers
You can use dividers to separate and group related content. Use dividers sparingly to avoid creating unnecessary visual clutter.
|
Important
| Open the Context Menu by right-clicking (mouse) or long-pressing (touch) a Grid row. |
new tab
GridContextMenu<Person> menu = grid.addContextMenu();
menu.addItem("View", event -> {});
menu.add(new Hr());
menu.addItem("Edit", event -> {});
menu.addItem("Delete", event -> {});
menu.add(new Hr());
menu.addItem("Email", event -> {});
menu.addItem("Call", event -> {});Checkable Menu Items
Checkable Menu Items can be used to toggle a setting on and off.
new tab
assignee = new Span();
menu = new ContextMenu();
menu.setTarget(assignee);
List<Person> people = DataService.getPeople(5);
for (Person person : people) {
MenuItem menuItem = menu.addItem(person.getFullName(), event -> {
setAssignee(person);
});
menuItem.setCheckable(true);
}
setAssignee(people.get(0));
...
private void setAssignee(Person person) {
// Update checked state of menu items
menu.getItems().forEach(
item -> item.setChecked(item.getText().equals(person.getFullName()))
);
assignee.setText(person.getFullName());
}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.
|
Important
| Open the Context Menu by right-clicking (mouse) or long-pressing (touch) a Grid row. |
new tab
GridContextMenu<File> menu = grid.addContextMenu();
GridMenuItem<File> export = menu.addItem("Export");
GridSubMenu<File> exportSubMenu = export.getSubMenu();
exportSubMenu.addItem("Portable Document Format (.pdf)", event -> {});
exportSubMenu.addItem("Rich Text Format (.rtf)", event -> {});
exportSubMenu.addItem("Plain text (.txt)", event -> {});Custom Items
You can customize the items to include more than a single line of text.
|
Important
| Open the Context Menu by right-clicking (mouse) or long-pressing (touch) a Grid row. |
new tab
GridContextMenu<Person> menu = grid.addContextMenu();
GridMenuItem<Person> assign = menu.addItem("Assign");
assign.addComponentAsFirst(createIcon(VaadinIcon.USER_CHECK));
GridSubMenu<Person> assignSubMenu = assign.getSubMenu();
people.subList(5, 10).forEach(person -> {
assignSubMenu.addItem(createPersonItem(person), event -> {});
});
...
private Component createPersonItem(Person person) {
Avatar avatar = new Avatar();
avatar.setImage(person.getPictureUrl());
avatar.setName(person.getFirstName());
Span name = new Span(person.getFullName());
Span apps = new Span(getApplicationCount());
apps.getStyle()
.set("color", "var(--lumo-secondary-text-color)")
.set("font-size", "var(--lumo-font-size-s)");
VerticalLayout verticalLayout = new VerticalLayout(
name,
apps
);
verticalLayout.setPadding(false);
verticalLayout.setSpacing(false);
HorizontalLayout horizontalLayout = new HorizontalLayout(
avatar,
verticalLayout
);
horizontalLayout.setAlignItems(FlexComponent.Alignment.CENTER);
horizontalLayout.getStyle().set("line-height", "var(--lumo-line-height-m)");
return horizontalLayout;
}Disabled Menu Items
You can disable menu items to show that they are unavailable.
|
Important
| Open the Context Menu by right-clicking (mouse) or long-pressing (touch) a Grid row. |
new tab
GridContextMenu<File> menu = grid.addContextMenu();
GridMenuItem<File> export = menu.addItem("Export");
GridSubMenu<File> exportSubMenu = export.getSubMenu();
GridMenuItem<File> exportPDF = exportSubMenu.addItem("Portable Document Format (.pdf)", event -> {});
exportPDF.setEnabled(false);
GridMenuItem<File> delete = menu.addItem("Delete", event -> {});
delete.setEnabled(false);Left-Click
You can use left-click to open Context Menu in situations where left-click does not have any other function, for example a Grid without selection support.
|
Important
| Open the Context Menu by clicking a Grid row. |
new tab
GridContextMenu<Person> menu = grid.addContextMenu();
menu.setOpenOnClick(true);
menu.addItem("View", event -> {});
menu.addItem("Edit", event -> {});
menu.addItem("Delete", event -> {});Best Practices
Context Menu is used to provide shortcuts to the user. You should not use it as the only or primary means to complete a task. The primary way should be accessible elsewhere in the UI.
|
Important
| Open the Context Menu by right-clicking (desktop) or long-pressing (mobile) a Grid row, or use the Menu Bar in the last column. |
new tab
grid.addComponentColumn(file -> {
MenuBar menuBar = new MenuBar();
menuBar.addThemeVariants(MenuBarVariant.LUMO_TERTIARY_INLINE);
MenuItem menuItem = menuBar.addItem("•••");
menuItem.getElement().setAttribute("aria-label", "More options");
return menuBar;
})
.setAutoWidth(true)
.setFlexGrow(0);
GridContextMenu<File> menu = grid.addContextMenu();
menu.addItem("Preview", event -> {});
menu.addItem("Edit", event -> {});
menu.addItem("Delete", event -> {});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/component, such as an overflow menu, use Menu Bar.