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

Thanks to Slawek Mikula

  • fix notification-center bug on many uis on a one session
  • NotificationCenter.java - add notification delete event listener
  • do not block ExecutorService indefinitely on notificationQueue
Released
2020-11-15
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
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 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
Vaadin 24 in 3.2.3
Browser
Firefox
Google Chrome
Internet Explorer
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