[menu-bar] Support vertical orientation

[KasparScherrer]

In My Application I have the menu on the left side, vertically, but the MenuBar Component is only made for horizontal display of menu items.

I tried to do it with custom CSS, but even after I managed to display all my primary MenuItems vertically my solution was not applicable, because the SubMenu (ContextMenu) appears below the clicked MenuItem and thereby overlaps with the MenuItem below. (Actually, I can't click the submenu items because the submenu disappears as soon as the cursor is over the MenuItem below)

I would like to have a vertical mode available for the MenuBar somehow if possible. Thank you

[jm2rodriguez]

In our application we need also a menu on the left side, vertically.

[mcooper7290]

I also would love to see this for the same reason - creating a left-side menu vertical menu bar.

[Jaiman7]

yes please to Vertical

[SomMeri]

Workaround for " I can't click the submenu items because the submenu disappears as soon as the cursor is over the MenuItem below":

Create vaadin-menu-bar-button.css file:

.vaadin-button-container {
    overflow: hidden;
}

and import it:

@CssImport(value = "./styles/vaadin-menu-bar-button.css", themeFor = "vaadin-menu-bar-button")
public class MyVerticalMenuComponent [...]{

The core issue is that vaadin-button-container was sticking outside of menu item itself. Sticking part was invisible/transparent and took empty looking space between menu items. Overflow hidden will prevent it from sticking out.