How to adjust CSS for a v14 MenuBar component?

Flow
1

I’ve gone through the documentation on theming I still cant find a clear example of how to adjust css properties for a standard vaadin component like MenuBar. I’m aware that these can’t happen in a global stylehseet, so where can I find an example where someone makes a change to the CSS of an existing component like Button, MenuBar, TabSheet, etc?

2

We’ve been rewriting the documentation for themes and styling lately. It’s not yet published, but you can preview it at https://elastic-bohr-b758c3.netlify.app/documentation-themes/themes-and-styling-overview/ (heads up, the search is not functional)

This might be a little unfair, but I’m asking if you would be willing to try out the new documentation, and see if that helps you achieve what you need to do? I would appreciate if you did, and reported back how it went.

But, if you are short on time, I’ll add some quick pointers below.

.

.

.

.

.

.

.

.

.

.

.

.

I’m assuming you are using Flow and server-side views/components (Java). For those, you can use the @CssImport annotation to add component-specific style sheets.

There are three different components that make up the MenuBar as a whole. The main <vaadin-menu-bar> component, which contains <vaadin-menu-bar-button> elements (the root level items). Then there’s the <vaadin-menu-bar-submenu> component, which extends <vaadin-context-menu>. Therefore, the actual visible popup menu elements in the DOM will be the same as for a context menu, that is, <vaadin-context-menu-overlay and <vaadin-context-menu-item>

Add these annotations to your main layout class, for example.

@CssImport(value = "styles/menu-bar.css", themeFor= "vaadin-menu-bar")
@CssImport(value = "styles/menu-bar-button.css", themeFor= "vaadin-menu-bar-button")
@CssImport(value = "styles/menu-bar-submenu.css", themeFor= "vaadin-context-menu-overlay")
@CssImport(value = "styles/menu-bar-submenu-item.css", themeFor= "vaadin-context-menu-item")

Place the .css files in the /frontend/styles folder.

In the style sheet, write selectors that match the stylable parts of each component. For example,

menu-bar-button.css:

:host {
  /* Styles that affect the root level menu buttons */
}

menu-bar-submenu.css:

[part="overlay"]
 {
  /* Styles that affect overlay popup container. Note, that this will affect all context menus, not just the menu bar. */
}

I hope that helps you get on the right track!

3

Thanks Jouni, the new documentation is looking great.

4

Thanks Jouni, that helped a ton. The part that was especially confusing is the syntax for referencing properties of the host element.

“:host” almost looks like a css pseudo element selector, but it doesn’t operate like one. To reference properties of the host you have to do :host([attr=“val”]
) which doesn’t even feel like css :).

But either way, I’ve gotten past my current issues and I have a much better understanding of the interaction between CSS and the shadow dom elements.