How do I style an individual MenuBar item?

Flow
1

If I use:

vaadin-menu-bar-button {
background-color: red;
}

then all my menubar items are red which is great. However if I want to style just one menubar item to stand out such as:

MenuItem titleMenuItem = menuBar.addItem(special, click → doSomething());
titleMenuItem.addClassName(“special”);

vaadin-menu-bar-button.special {
background-color: yellow;
}

it doesn’t work color that one menubar item to yellow. I tried overlay and so on but no luck. I even tried to add ::part(label) to test if I needed to be more specific and I had the same issue.

All that to ask how can I change the style of just one menu item to be different then the others?

2

Well now it gets tricky, it’s not official supported at the moment :sweat_smile: https://github.com/vaadin/platform/issues/3594

3

Of course that had to be a question I had to ask :wink:

4

That would explain it. Thank you. I guess for now I’ll just add a button in a HorizontalLayout to fake it since it’s a single menu item anyways. Again thank you.

5

Yeah sounds reasonable :sweat_smile:

6

Interesting. I’ve tried this:

7

final MenuItem menuItem = menuBar.addItem(account);
menuItem.addClassName(“account-menu-item”);

8

.account-menu-item {
background-color: deeppink;
}

9

And it works.