MenuBar - access vaadin-menu-bar-button

Flow
1

As far as I understood, MenuBar component wraps menu items inside a button: vaadin-menu-bar-button

Is there any way to access the menu button via element API somehow?

MenuBar menuBar = new MenuBar();
MenuItem item1 = menuBar.addItem("Menu Item 1");

item1.getElement().getStyle().set("border", "1px dashed teal");     // vaadin-context-menu-item
menuBar.getElement().getStyle().set("border", "1px solid gold");    // vaadin-menu-bar

// how to access vaadin-menu-bar-button ???

18394842.png

2

No it’s not possible to get the button via element API.

However, if your goal is to style the buttons differently, that would be achievable by adding your own style sheet using [@CssImport]
(https://vaadin.com/docs/v14/themes/importing-style-sheets.html). The following code has not been tested, but should only bring the point across.

@CssImport(value = "./styles/myMenuBarStyles.css", themeFor = "vaadin-menu-bar")
public class MainView ..... {
	...
}

<!-- myMenuBarStyles.css: --> 
:host([part="menu-bar-button"]
){
	border: 1px dashed teal;
}

[Styling Documentation]
(https://vaadin.com/docs/v14/themes/themes-and-styling-overview.html)

3

@Kaspar Scherrer: thanks!
This way, how to style the menu buttons individually?

The way you described helps me to have a common style for all the menu items, but what if I would like to have different styles for the first menu item than the others?