Directory

← Back

HybridMenu

Modern Navigation Menu

Author

Rating

Popularity

300+

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

Update to Vaadin 24

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

Compatibility

Framework
Vaadin 24
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 23 in 3.2.2
Browser
Firefox
Google Chrome
Microsoft Edge

HybridMenu - Vaadin Add-on Directory

Modern Navigation Menu HybridMenu - Vaadin Add-on Directory
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](https://gitlab.com/KaesDingeling/Hybrid-Menu/issues)
Online