Access menu bar label in Vaadin 23

Flow
1

Hi there,

I want to style the label of a vaadin menu bar

The path to the component is:
div > vaadin-menu-bar > #shadow-root > div > vaadin-menu-bar-button > vaadin-context-menu-item > vaadin-horizontal-layout > label.language-label

The developer tools css-Selector results in .language-label but that does not work because of the shadow-root. I cannot set a class to a menu Item.

Tried several variants without success now, but how can I access the label of a menu bar or a certain menu item itself if i cannot specify a class?

Thanks
Matt

2

Any custom content you place into a MenuBar button will not be in Shadow DOM, so you should be able to style it normally, just based on the classname for example.

3

So in your case simply

 ...
}```

(btw I would recommend a `span` instead of a `label` for that, unless it's a label for an input field or such)
4

…
Wait, sorry, you said V23 – that’s more tricky (and one of the reasons we refactored the DOM structure of the MenuBar in V24).

I don’t remember off the top of my head how to do that, but I’ll see if I can refresh my memory

5

…
Ok, so I think what you need to do is inject the CSS into the Shadow DOM of vaadin-context-menu-item:

  ...
}```
6

If you have a theme folder, you’d place that in themes/yourtheme/components/vaadin-context-menu-item.css

7

Thanks that is working now. The documentation of Vaadin 24 is much better in regards of the styling and not always you can transfer it to Vaadin 23.

8

.