MenuBar in Vaadin 14 Help.

Flow
1

Hello,
i’m very new to Vaadin and i want to create a Menu Bar with different Tabs.
I found this: https://vaadin.com/components/vaadin-tabs and imported it but i don’t understand how to but this into a Navigation Layout or whatever.
I tried using a HorizontalLayout and added a Span with a Text and the Tabs but the Tabs don’t fit and the whole Layout isn’t fixed at above site page. I have no clue what i should do now. I heard about a MenuBar but i only found it in Vaadin 8.
Thanks for your help.
Mark

2

Vaadin 14 does contain a MenuBar component: https://vaadin.com/api/platform/14.0.9/com/vaadin/flow/component/menubar/MenuBar.html
You can find the documentation and examples here: https://vaadin.com/components/vaadin-menu-bar

3

Vaadin 14 MenuBar regressions in comparison to Vaadin 8:

  • Cursor is no longer a Pointer when hovering on MenuBar. ===>
    Workaround: mnuBar.getElement().getStyle().set(“cursor”, “pointer”);
  • When having a set of MenuBar, if one of them has its sub-menus opened, then clicking another MenuBar does not work, you must click twice. First click will close active submenu, second click will open your other MenuBar submenu. ===>
    Workaround: menuBar.setOpenOnHover(true); But this doesn’t give the exact same result…
  • Menu commands can no longer have icons