How change color of items in MenuBar when selected

How can I change the color of the items in the menu when I select them?

Items in my menu do not have sub-menu items.

In your menuSelected callback, you can use setStyleName to assign a different CSS class to the selected item. Examples on how to use setStyleName can be found here:
http://demo.vaadin.com/sampler/#MenuBarItemStyles

Starting with Vaadin 6.7, which is currently in the beta phase, you can also enable htmlContentAllowed and change color by changing the html of the item text.

You can also use the automatic style names “v-menubar-menuitem-checked”, “v-menubar-menuitem-unchecked” (checkmark active or not) and “v-menubar-menuitem-selected” (meaning mouse cursor or keyboard focus is on it) - see e.g.
http://demo.vaadin.com/sampler/#MenuBarCheckableItems
and use Firebug or similar to check the style names.

many thanks Henri.
more precisely:


http://demo.vaadin.com/sampler/#MenuBarCheckableItems

when i click File > and then a sub-item (for example New) , I need that the File Item remain Blue.
it’s possible?

another problem is that I made a menu with no sub-elements.
when i click one of this item I need to point out that I have selected (and i solved this with checked).
maybe I should use another method and not the MenuBar (Button o Link)???

Thank you

in this case I used checked Items, but this is not possible for menu item with children.

Use a set of buttons instead of MenuBar. Easier to control, easier to theme. when you click on a button, do button.addStyleName(“active”); on that button and removeStyleName(“active”); on the last active button / all buttons.

ok Jens thanks for the advice !

In any case I have to find the solution for this problem:


http://demo.vaadin.com/sampler/#MenuBarCheckableItems

when i click File > and then a sub-item , I need that the File Item remain Blue.

if anyone knows the solution please reply

If you set the menuBar.setHtmlContentAllowed(true);
then you can set html caption to the menuitems: menuItem.setText(“<span style="color:yellow;">caption”);

I’m facing the same problem with Mattia Ruggiero.
When I click Menu Item “File” > and then a sub-item, I’m trying to set specific style for “File” item, but it does not work.
My function is:

private void setHighLightSelectedMenuItem(final MenuItem selectedItem) {
        if (selectedItem.getParent() == null) {
                    selectedItem.setStyleName("selected");
        } else {
            setHighLightSelectedMenuItem(selectedItem.getParent());
        }
    }

I also tried to set html caption to the menu item as what Imre Petroczki suggested, but it does not work as well.
Please reply if anyone knows the solution for this.
Thank you in advance.