Directory

← Back

HybridMenu

Modern Navigation Menu

Author

Rating

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;

Compatibility

(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.

Version

Fix bug for upload new versions to directory and update to v23

Released
2023-04-15
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 23
Vaadin 13 in 3.0.5
Vaadin 12 in 3.0.5
Vaadin 11 in 3.0.5
Vaadin 10 in 3.0.5
Vaadin 8.0+ in 3.0.0
Vaadin 22 in 3.2.1
Vaadin 21 in 3.2.1
Vaadin 20 in 3.2.1
Vaadin 19 in 3.2.1
Vaadin 18 in 3.2.1
Vaadin 17 in 3.2.1
Vaadin 16 in 3.2.1
Vaadin 15 in 3.2.1
Vaadin 14 in 3.2.1
Vaadin 24 in 3.2.3
Browser
Firefox
Google Chrome
Microsoft Edge

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online