Navigation component for Vaadin: A navigation component meant for e.g. main menu. Supports links, captions, icons, nesting and a number badge. Perfect for setting within the drawer of AppLayout.
Use setLabel(String) to put the label above the component.
Use setItems(VaadinNavItem…) put configure the menu items.
Tested to work with Vaadin 20. Will probably work with 18/19 as well. 14.5/14.6 had an older version of LitTemplate/LitElement in use, and was not compatible out of the box, but we might get a compatible 14.x version in the future. You can also copy paste the few files from GitHub and place them directly in your project.
Code example:
VaadinNav nav = new VaadinNav();
nav.setLabel("Main menu");
nav.setItems(
new VaadinNavItem("dashboard", "Dashboard", "lineBarChart"),
new VaadinNavItem("customers", "Customers", "suitcase"),
new VaadinNavItem("leads", "Leads", "tabA", null,
Arrays.asList(
new VaadinNavItem("leads/high-profile",
"High profile", "userStar"),
new VaadinNavItem("leads/others", "Others",
"userClock"))),
new VaadinNavItem("todos", "To-dos", "tasks", 9, Arrays.asList(
new VaadinNavItem("leads/High", "High", null, 2),
new VaadinNavItem("leads/medium", "Medium", null, 4),
new VaadinNavItem("leads/low", "Low", null, 3))),
new VaadinNavItem("inbounds", "Inbounds", "envelope", 12));
nav.setWidth("200px");
add(nav);