MenuBar for navigation layout

Flow
1

Hello,

I need some help for styling the menu bar i want to use the menubar like a header navigation,
but a i cant set the size of the menu bar.
17878440.png

2

MenuBar implements HasSize, so yes you can set the size of the menu bar, using setWidth(), setHeight(), setSizeFull(), etc.

If you did that and the menu bar items remain like this, have you tried setting the sizes of the individual Components that you add as MenuItems?

3

When i use setWidth or setHeigt the menu bar dont changes only arroud.

4

Hi Leo,

You’ll need to do three things:

  1. Call MenuBar::setHeight.

  2. Create two CSS files: menu-bar.css and menu-bar-button.css.

menu-bar.css

[part="container"]
 {
  height: 100%;
}

menu-bar-button.css

:host {
  height: 100%;
}
  1. Import those two CSS files somewhere (e.g. in your main layout/root class) using:
@CssImport(value = "./styles/components/menu-bar.css", themeFor = "vaadin-menu-bar")
@CssImport(value = "./styles/components/menu-bar-button.css", themeFor = "vaadin-menu-bar-button")