On This Page

A menu which shows up when the user clicks, right-clicks or long-presses a wrapped component.

  • Fluent
  • Declarative

     ContextMenu.builder()
            .menu(List.of(
                    RouteLink.builder()
                            .label("Page 1")
                            .build(),
                    RouteLink.builder()
                            .label("Page 2")
                            .build()
            ))
            .wrapped(new Text("I am a wrapped element. Just right click me :)"))
            .build(),

TBD

Available properties

This is the list of available properties for a context menu:

PropertyDescriptionNotes
idid for this component
cssClasseslist of css classescontent of the css attribute
styleinline style attributescontent of the style attribute
menulist of menu options, as Actionables
wrappedthe wrapped componentany component
activateOnLeftClickto show up the context menu on left clicktrue/false

And above is the list of classes implementing the Actionable interface, and their properties.

Common properties for all Actionables

These properties are common to all the menu options

PropertyDescriptionNotes
labeltext to show. Only if no component is supplied
selectedif this options must appear as checked
componentany component to be displayed instead of label
classNameany css class name
disabledif this option must appear as disabled
disabledOnClickif this option must be disabled on click
itemDataany object. It will travel back to the backend, if this option is selected

Use it for taking the user to a concrete route

PropertyDescriptionNotes
routeroute to navigate to
targetany of Top, Parent

The divider has no properties. Just draws an horizontal line.

PropertyDescriptionNotes
submenua list of Actionables (the menu options)
PropertyDescriptionNotes
componentSuppliera component supplier

You can see a full explanation of those properties at https://vaadin.com/docs/latest/components/context-menu