HybridMenu

Modern Navigation Menu

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

Modern Navigation Menu

Its a Menu for navigating between views. In addition you are able to customize some components and connectors. You are welcome to use it.

Im happy for some suggestions

If you have any questions or want to report a bug, I ask you to create an issue in Gitlab

Sample code

@Push
@Theme(Lumo.class)
@BodySize(height = "100vh", width = "100vw")
public class DemoRouterLayout extends HybridMenu {
	private static final long serialVersionUID = 2766167599243004212L;

	@Override
	public boolean init(VaadinSession vaadinSession, UI ui) {
		withConfig(new MenuConfig());
		// Create Menu Entrys

		return true; // build menu
	}
}

LeftMenu leftMenu = getLeftMenu();

leftMenu.add(HMLabel.get()
		.withCaption("<b>Hybrid</b> Menu")
		.withIcon(new Image("./frontend/HybridMenu/Images/Logo.png", "HybridMenu Logo")));

// BreadCrumbs can be set if enable
getBreadCrumbs().setRoot(leftMenu.add(HMButton.get()
		.withCaption("Home")
		.withIcon(VaadinIcon.HOME)
		.withNavigateTo(HomePage.class)));

leftMenu.add(HMButton.get()
		.withCaption("Notification Builder")
		.withIcon(VaadinIcon.BELL)
		.withNavigateTo(NotificationBuilderPage.class));

HMSubMenu memberList = leftMenu.add(HMSubMenu.get()
		.withCaption("Member")
		.withIcon(VaadinIcon.USERS));

memberList.add(HMButton.get()
		.withCaption("Settings")
		.withIcon(VaadinIcon.COGS)
		.withNavigateTo(SettingsPage.class));

memberList.add(HMButton.get()
		.withCaption("Member")
		.withIcon(VaadinIcon.USERS)
		.withNavigateTo(MemberPage.class));

UI.getCurrent().getElement().setAttribute("theme", ""); // Light
UI.getCurrent().getElement().setAttribute("theme", Lumo.DARK) // Dark

TopMenu topMenu = getTopMenu();

topMenu.add(HMTextField.get(VaadinIcon.SEARCH, "Search ..."));

topMenu.add(HMButton.get()
		.withIcon(VaadinIcon.HOME)
		.withDescription("Home")
		.withNavigateTo(HomePage.class));

getNotificationCenter()
		.setNotiButton(topMenu.add(HMButton.get()
				.withDescription("Notifications")));

withConfig(MenuConfig.builder()
			.breadcrumbs(true) // Use breadcrumbs
			.build());

/* Available Settings */
private ETheme theme = ETheme.Lumo;

private VaadinIcon subMenuIcon = VaadinIcon.ANGLE_UP;

private VaadinIcon notificationButtonIcon = VaadinIcon.BELL;
private VaadinIcon notificationButtonEmptyIcon = VaadinIcon.BELL_O;
private VaadinIcon notificationCenterCloseIcon = VaadinIcon.ANGLE_RIGHT;
private VaadinIcon notificationRemoveIcon = VaadinIcon.CLOSE;

private NotificationPosition notificationPosition = NotificationPosition.BOTTOM;

private long notificationDisplayTime = 5000;

private VaadinIcon breadcrumbSeperatorIcon = VaadinIcon.ANGLE_RIGHT;
private boolean breadcrumbs = true;

public static int notificationQueueMax = 200;

Links

• Vaadin 10 Source Code
• Vaadin 23 Source Code
• Vaadin 8 Source Code
• View on GitLab
• Issue tracker
• Vaadin 14 Source Code

Compatibility