Vaadin Elements - Context Menu - Styling

Styling

vaadin-context-menu is style-agnostic about the menu template contents. The menu overlay itself has some default styles, such as margin, that are customizable with a custom CSS mixin.

For the menu template, most of the code examples use paper-menu and paper-item, but it is allowed to use any other elements there as well.

Styling the Menu

paper-menu and paper-item elements come with Material Design styles by default. See the paper-menu and paper-item documentation for more information on how to customize their look.

Selected Item Style

paper-menu has the selection functionality, which makes the previously selected paper-item look different by applying the iron-selected classname.

You can change the class name that paper-menu sets for selected items to prevent this:

<vaadin-context-menu>
  <template>
    <paper-menu selected-class="no-selected-styles-please">
      <paper-item>First menu item</paper-item>
      <paper-item>Second menu item</paper-item>
    </paper-menu>
  </template>

  <p>The context menu of this paragraph does not change the items look when opened again.</p>
</vaadin-context-menu>

Styling the Overlay

vaadin-context-menu stamps the menu template in the menu overlay element, which has empty styles by default.

The following custom CSS mixin is available for styling:

Property name Description

--vaadin-context-menu-overlay

Mixin applied to the overlay