← Back


A Toolbar that can display Buttons and Menus



There are hints in various Vaadin projects and documentation for putting together a toolbar (a fundamental UI component), but I found all required huge amounts of additional work for them to be usable, mostly because of CSS complexities. Also, all of them allowed only buttons and not menus. This project enables menus by using the ContextMenu add-on which is required by this project.

There is some information on building a toolbar in the Vaadin tutorial. There is some information on building a toolbar in Reindeermods. There is some information on building a toolbar in Chameleon Theme.

This project takes from these and puts together a toolbar UI component that is intended to be easily usable. The project has 3 toolbars:

NativeToolbar - This is the one that works best. It is based on the descriptions in the tutorial and uses NativeButtons, which it says work best here. It has rounded corners, centers both vertically and horizontally, wraps long text, properly groups buttons, and it generally looks pretty good even if widths are not specified. The demo shows that when widths are not specified, the only button that doesn't look quite right is the grouped menu button and regular button (Menu Two). Also, in Firefox the top and left borders may not show up properly. In IE, the use of small text doesn't work so the specified widths don't work as well. This is easily remedied by specifying better widths and applies to all the toolbars.

SegmentToolbar - This is based on Segment in Chameleon Theme. It also looks attractive, has rounded corners, wraps long text and centers only horizontally, and it generally looks pretty good even if widths are not specified. Grouping doesn't work. Couldn't figure out how to remove the right border of one button and the left border of another. Vertical centering also doesn't work. Also in IE the bottom border may not appear.

CssToolbar - This doesn't work particularly well. It is based on the toolbar example in Chameleon Theme. I am including it because it may have potential and also highlights an issue either in CssLayout or in ContextMenu. When you open the ContextMenu on top of a CssLayout, part of the CssLayout disappears.

Sample code

Toolbar bar = new NativeToolbar("62px");
Button homeButton = bar.createAndAddButton("Home", homeIcon, "65px");
Button backButton = bar.createAndAddButton("Back", arrowLeftIcon, "50px");
Button menuExampleButton = bar.createAndAddMenu("Menu Example", "70px");

        final Toolbar.Command menuCommand = new Toolbar.Command() {
            private static final long serialVersionUID = 5744979083564825236L;

            public void menuSelected(final ContextMenuItem selectedItem) {
                        "Selected: " + selectedItem.getName());

bar.addMenuItem(menuExampleButton, "Arrow Right", arrowRight, false, menuCommand);


(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.


Apache License 2.0


Vaadin 6.0+