Vaadin-Menu Bar

Vaadin-Menu bar Features

Vaadin-menu bar provides various features like adding icons, disabling some items, adding checkable items, and many more. Let’s discuss some of them.

Overflow

Items that do not fit within the menu bar's current width are automatically collapsed into an overflow menu.

Code:

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.router.Route;

@Route("menu-bar-overflow")
public class MenuBarOverflow extends Div {
    public MenuBarOverflow() {
        MenuBar menuBar = new MenuBar();
        addItems(menuBar);
        Div div = new Div();
        div.setText("Move the splitter to see overflow feature");

        SplitLayout splitLayout = new SplitLayout(menuBar, div);

        add(splitLayout);
    }

    private void addItems(MenuBar menuBar) {
        menuBar.addItem("View");
        menuBar.addItem("Edit");

        MenuItem share = menuBar.addItem("Share");
        SubMenu shareSubMenu = share.getSubMenu();
        MenuItem onSocialMedia = shareSubMenu.addItem("On social media");
        SubMenu socialMediaSubMenu = onSocialMedia.getSubMenu();
        socialMediaSubMenu.addItem("Facebook");
        socialMediaSubMenu.addItem("Twitter");
        socialMediaSubMenu.addItem("Instagram");
        shareSubMenu.addItem("By email");
        shareSubMenu.addItem("Get Link");

        MenuItem move = menuBar.addItem("Move");
        SubMenu moveSubMenu = move.getSubMenu();
        moveSubMenu.addItem("To folder");
        moveSubMenu.addItem("To trash");

        menuBar.addItem("Duplicate");
    }

}

You can also try this code with Online Java Compiler

Run Code

Output:
 

Icons

Icons may be used in place of or in addition to text for menu items.

Code:

MenuBar menuBar = new MenuBar();
menuBar.addThemeVariants(MenuBarVariant.LUMO_ICON);
MenuItem share = createIconItem(menuBar, VaadinIcon.SHARE, "Share", null);
SubMenu shareSubMenu = share.getSubMenu();
createIconItem(shareSubMenu, VaadinIcon.SHARE, "By Email", null, true);
createIconItem(shareSubMenu, VaadinIcon.LINK, "Get link", null, true);
createIconItem(menuBar, VaadinIcon.COPY, null, "duplicate");

...

private MenuItem createIconItem(HasMenuItems menu, VaadinIcon iconName, String label, String ariaLabel) {
    return createIconItem(menu, iconName, label, ariaLabel, false);
}
private MenuItem createIconItem(HasMenuItems menu, VaadinIcon iconName, String label, String ariaLabel, boolean isChild) {
    Icon icon = new Icon(iconName);

    if (isChild) {
        icon.getStyle().set("width", "var(--lumo-icon-size-s)");
        icon.getStyle().set("height", "var(--lumo-icon-size-s)");
        icon.getStyle().set("marginRight", "var(--lumo-space-s)");
    }

    MenuItem item = menu.addItem(icon, e -> {
    });

    if (ariaLabel != null) {
        item.getElement().setAttribute("aria-label", ariaLabel);
    }

    if (label != null) {
        item.add(new Text(label));
    }
    return item;
}

You can also try this code with Online Java Compiler

Run Code

Output:

Disabled Items

Menu items can be disabled to show that they are not available right now.

Code:

MenuBar menuBar = new MenuBar();

menuBar.addItem("View");
MenuItem edit = menuBar.addItem("Disabled");
edit.setEnabled(false);

MenuItem share = menuBar.addItem("Share");
SubMenu shareSubMenu = share.getSubMenu();
shareSubMenu.addItem("By email").setEnabled(false);
shareSubMenu.addItem("Get Link");

You can also try this code with Online Java Compiler

Run Code

Output:

Checkable Menu Items

Dropdown menu items may be configured to be checkable so that users can turn choices on and off.

Code:

MenuBar menuBar = new MenuBar();
MenuItem options = menuBar.addItem("Checkable Menu");
SubMenu subItems = options.getSubMenu();

MenuItem saveItem = subItems.addItem("Coding ninja");
saveItem.setCheckable(true);
saveItem.setChecked(true);
MenuItem notifyItem = subItems.addItem("Coding Ninjas Studio");
notifyItem.setCheckable(true);
notifyItem.setChecked(false);

saveItem.addClickListener(listener);
notifyItem.addClickListener(listener);
add(menuBar);

You can also try this code with Online Java Compiler

Run Code

Output:

Dividers

You can also use dividers in checkable menu items to show separate group items.

Code:

MenuBar menuBar = new MenuBar();
MenuItem item = menuBar.addItem("Share");
SubMenu subMenu = item.getSubMenu();
subMenu.addItem("On Facebook");
subMenu.addItem("On Twitter");
subMenu.addItem("On Instagram");
subMenu.add(new Hr());
subMenu.addItem("By email");
subMenu.addItem("Get link");
subMenu.add(new Hr());
subMenu.addItem("Visit Coding Ninjas Studio");

You can also try this code with Online Java Compiler

Run Code

Output:

Open on Hover

Dropdown menus can be customized to open on hover rather than on click in the component.

MenuBar menuBar = new MenuBar();
menuBar.setOpenOnHover(true);
addItems(menuBar);
add(menuBar);   

...

private void addItems(MenuBar menuBar) {
        MenuItem share = menuBar.addItem("Hover-over");
        SubMenu shareSubMenu = share.getSubMenu();
        MenuItem onSocialMedia = shareSubMenu.addItem("Coding ninjas");
        shareSubMenu.addItem("Coding Ninjas Studio");
}

You can also try this code with Online Java Compiler

Run Code

Output:

Keyboard Usage

Applications created using vaadin can be controlled using keyboard shortcuts. Some of those shortcuts are mentioned below.

Frequently Asked Questions

What does a menu bar do?

A browser or application window's menu bar, which is normally located at the upper left corner, contains drop-down menus that let users interact with the content or application in a variety of ways.
 

Who is Vaadin for?

Vaadin is designed to improve full-stack teams' productivity. You may concentrate all your efforts on creating functionality thanks to full-stack type safety and smooth server-to-browser communication.
 

Is vaadin free?

Yes, it is accessible for both free and paid use. Because it is an open-source development platform, we can use it primarily for free. At a relatively little cost, we can also use it for business purposes.

Conclusion

In this article, we have extensively discussed vaadin-menu bar. We have also seen different features available in vaadin-menu bar.
 

If you think this blog has helped you enhance your knowledge about vaadin-menu bar and if you would like to learn more, check out our articles Vaadin-Button, Vaadin-Board, Vaadin-Environment Setup, Vaadin Architecture, and many more on our Website.
 

Visit our website to read more such blogs. Make sure that you enroll in the courses provided by us, take mock tests and solve problems available and interview puzzles. Also, you can pay attention to interview stuff- interview experiences and an interview bundle for placement preparations. Do upvote our blog to help fellow ninjas grow.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Please upvote our blog to help other ninjas grow.

Happy Learning!