Creating valo-like menu on the top

Flow
1

Hi vaadin community!

First of all i want to make clear the fact i’m new on Vaadin and I’m using vaadin 7.3.5

I’ve already downloaded the dashboard project and installed it. I want to create a menu like the one in the dashboard but this one i want to create will not be the left, i want to put it on the top. Is it possible? I’ve been looking at the code and (correct me if i’m wrong) the vaalo theme has a css property for the menu called “valo-menu”, is there a possibility to modify any property to put it on the top?

I’d appreciate any help you can give to me.

Thanks!

2

From :- the book of vaadin :

#First you need to create the menubar and add it to your main layout

MenuBar menubar = new MenuBar(); main.addComponent(menubar); #second add your items to your menubar :

// A top-level menu item that opens a submenu
MenuItem drinks = barmenu.addItem("Beverages", null, null);
// Submenu item with a sub-submenu
MenuItem hots = drinks.addItem("Hot", null, null);
hots.addItem("Tea",
new ThemeResource("icons/tea-16px.png"), mycommand);
hots.addItem("Coffee",
new ThemeResource("icons/coffee-16px.png"), mycommand);

MenuBar object with the addItem() method. It takes
a string label, an icon resource, and a command as its parameters. The icon and command are
not required and can be null. The addItem() method returns a MenuBar.MenuItem object,
which you can use to add sub-menu items. The MenuItem has an identical addItem() method.

your command is what happen when user click your MenuItem . you create it with .

MenuBar.Command mycommand = new MenuBar.Command() {
public void menuSelected(MenuItem selectedItem) {
selection.setValue("Ordered a " +
selectedItem.getText() +
" from menu.");
}
};

for more you can see the book of vaadin p186.

i’m not very old with vaadin put i hope it help .

3

Hey Mohammed, thanks for your response!

Actually, i’ve tried the menubar as the book of vaadin says how to use it, but it actually stays on the left. Does anyone know how how to put it on the top?

Thanks for your help!