Context Menu
- Usage
- Styling
- Dividers
- Checkable Menu Items
- Hierarchical Menu
- Custom Items
- Styling Menu Items
- Disabled Menu Items
- Left-Click
- Custom Item Data
- 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 the right by default, or with a left click. On a touch device, a long press opens the context menu.
|
Important
| Open the Context Menu by right-clicking (i.e., with a mouse), or by long-pressing (i.e., on a touch screen), 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 (i.e., with a mouse), or by long-pressing (i.e., on a touch screen), 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 (i.e., with a mouse), or by long-pressing (i.e., on a touch screen), 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 (i.e., with a mouse), or by long-pressing (i.e., on a touch screen), 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;
}Styling Menu Items
Individual menu items can be styled by applying custom class names to them, and writing CSS style blocks targeting those class names.
|
Note
|
Theme Names, Not Class Names
In versions prior to 24.3, theme names must be used instead (i.e., theme property / addThemeNames Java method). The CSS syntax for targeting a theme name is [theme~="custom-theme"]
|
Disabled Menu Items
You can disable menu items to show that they are unavailable.
|
Important
| Open the Context Menu by right-clicking (i.e., with a mouse), or by long-pressing (i.e., on a touch screen), 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);Disable on Click (Flow)
To prevent duplicate clicks while the server is processing a request, call the setDisableOnClick(true) method on a menu item instance to disable immediately that menu item on the client-side when it’s clicked.
new tab
MenuItem summarize = menu.addItem("Summarize with AI");
summarize.setDisableOnClick(true);Left-Click
You can use left-click to open Context Menu in situations where left-click doesn’t have any other function (e.g., 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 -> {
});Custom Item Data
Context Menu allows you to associate custom data with menu items. This can be useful for storing additional information about the item, such as an item type or a value. The data can then be used to trigger actions when an item is selected.
new tab
Div wrapper = new Div(
new H1("Context Menu"),
new Paragraph("Menu Bar is a horizontal button bar with hierarchical drop-down menus.")
);
ContextMenu menu = new ContextMenu();
menu.setTarget(wrapper);
menu.addItem("Copy as plain text", event -> {
// Provide a custom value by adding a click listener that holds a reference to that value
String value = "Menu Bar\n\nMenu Bar is a horizontal button bar with hierarchical drop-down menus.";
copyToClipboard(value);
});
menu.addItem("Copy as HTML", event -> {
String value = "<h1>Menu Bar</h1><p>Menu Bar is a horizontal button bar with hierarchical drop-down menus.</p>";
copyToClipboard(value);
});
menu.addItem("Copy as Markdown", event -> {
String value = "# Menu Bar\n\nMenu Bar is a horizontal button bar with hierarchical drop-down menus.";
copyToClipboard(value);
});Best Practices
Context Menu is used to provide 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.
|
Important
| Open the Context Menu by right-clicking (i.e., for desktops) or long-pressing (i.e., for mobile devices) 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);
menuBar.addItem("Preview", event -> {
});
menuBar.addItem("Edit", event -> {
});
menuBar.addItem("Delete", event -> {
});
return menuBar;
}).setWidth("70px").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 or component, such as an overflow menu, use Menu Bar.