Docs

Documentation versions (currently viewingVaadin 24)
Documentation translations (currently viewingEnglish)

Context Menu

Context Menu is a component that can be attached 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 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.
Open in a
new tab
Source code
ContextMenuBasic.java
context-menu-basic.tsx
context-menu-basic.ts

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.
Open in a
new tab
Source code
ContextMenuDividers.java
context-menu-dividers.tsx
context-menu-dividers.ts

Checkable Menu Items

Checkable Menu Items can be used to toggle a setting on and off.

Open in a
new tab
Source code
ContextMenuCheckable.java
context-menu-checkable.tsx
context-menu-checkable.ts

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.
Open in a
new tab
Source code
ContextMenuHierarchical.java
context-menu-hierarchical.tsx
context-menu-hierarchical.ts

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.
Open in a
new tab
Source code
ContextMenuPresentation.java
context-menu-presentation.tsx
context-menu-presentation.ts

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
Source code
ContextMenuClassname.java
context-menu-classname.tsx
context-menu-classname.ts
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.
Open in a
new tab
Source code
ContextMenuDisabled.java
context-menu-disabled.tsx
context-menu-disabled.ts

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.

Open in a
new tab
Source code
ContextMenuDisableOnClick.java

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.
Open in a
new tab
Source code
ContextMenuLeftClick.java
context-menu-left-click.tsx
context-menu-left-click.ts

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.

Open in a
new tab
Source code
ContextMenuCustomItemData.java
context-menu-custom-item-data.tsx
context-menu-custom-item-data.ts

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.
Open in a
new tab
Source code
ContextMenuBestPractices.java
context-menu-best-practices.tsx
context-menu-best-practices.ts

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.

Icons

Use icons when applicable to help improve recognition. It’s recommended to use commonly recognized icons to avoid confusion. Use icons consistently throughout a list of options.

Labelling

Suffix a menu item with "…​" when the associated action won’t be executed, but instead reveal some UI, like a dialog, for completing the action.

Component Usage Recommendations

Menu Bar

Component for displaying a horizontal menu with multi-level sub-menus.

Popover

A generic overlay whose position is anchored to an element in the UI.

760AB528-B02C-4B6C-BB27-D7EFEDAE706E