Vaadin Flow 14 menubar custom styles

Flow
1

I applied some styles to the buttons of the new menubar in vaadin 14. When i inspect the website’s html i can see the classnames were added but the attributes not showing up.

Since MenuItem has no method ‘addClassName(…)’ i thought i could add the classname with the method getElement().getClassList().add(…).

MenuItem item = menubar.addItem(VaadinIcon.USER.create());
item.getElement().getClassList().add("menu-buttons");

CSS

.menu-buttons {
  background-color: #F0F0F0 !important;
}

I have other styles defined and they work as expected.

2

menu-button element is in the shadow root of the menu-bar element.
It means it can’t be styled in a usual way.
You should style it properly.
Please refer e.g. to this tutorial : https://vaadin.com/docs/v13/flow/theme/theming-crash-course.html

3

The Vaadin documentation on custom CSS in v14 is some of the worst documentation I’ve seen in 15 years of software development.

4

Brian Sheely:
The Vaadin documentation on custom CSS in v14 is some of the worst documentation I’ve seen in 15 years of software development.

The only answer we have got from Vaadin was: “buy professional Service”…
Same issue on the Richt Text Editor Component
Dieter

5

Our theming documentation has now been completely rewritten and significantly improved: https://vaadin.com/docs/v14/themes/themes-and-styling-overview.html