Vertical Custom Menu Bar

Quick question: How do I make the
shown in
this Book of Vaadin example
vertical, so it behaves like the
QuickTickets Vaadin Demo

It seems
a GWT MenuBar
has the capability of being vertical by adding a boolean
argument to its constructor. But the Book example uses a Navigator and Views (which is, I think, what the QuickTickets demo also uses). How do I get it to be vertical?

I guess the bottom line is: How do I use Vaadin to make that nice sidebar shown in the QuickTickets demo?


QuickTickets doesn’t use MenuBar for the main menu, but the special Valo menu styles. Unfortunately, I don’t think it is documented anywhere at the moment.

Basically, it’s a set of style names, which you add to

  • valo-menu
    to the root component of the menu (a layout component or CustomComponent)

  • valo-menu-title
    to the menu title element, such as a Label or more complex title element

  • valo-menu-toggle
    to a button element that should toggle between compact and full menu

  • valo-menuitems
    to the layout (typically a CssLayout) containing the menu items

  • valo-menu-item
    to each of the menu items (typically a Button)



And you need to set setResponsive(true) for the UI to enable the responsive layout changes.

You can see the
DashboardMenu class
for how it is built.