Vertical Custom Menu Bar

Vaadin 6 / 7 / 8
1

Quick question: How do I make the
MenuBar
 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
true
 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?

2

Hi,

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)
    [list]

  • 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
    [list]

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

    [/list]

    [/list]

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.