Docs

Documentation versions (currently viewingVaadin 24)

Context Menu

Context Menu is a component that you can attach to any component to display a context menu.

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.
Open in a
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.
Open in a
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.

Open in a
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.
Open in a
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.
Open in a
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.

Open in a
new tab
MenuItem item = menu.addItem("Delete");
item.setClassName("text-error");
Note
Use theme names instead of class names in V24.2 and older
In versions prior to 24.3, theme names must be used instead (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 (mouse) or long-pressing (touch) a Grid row.
Open in a
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 immediately disable that menu item on the client-side when its clicked.

Open in a
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, for example a Grid without selection support.

Important
Open the Context Menu by clicking a Grid row.
Open in a
new tab
GridContextMenu<Person> menu = grid.addContextMenu();
menu.setOpenOnClick(true);
menu.