Navbar Navigation component

The navigation menu is a component displayed vertically on the left side of the screen. With this component, the user can navigate the pages of the application, which are listed in a hierarchy menu. The user can also open/close these menu items, if they contain submenu items. This component also works, if the full component cannot be displayed, the menu items will only have their icons displayed.

The component can have a header component (NavBarHeader), on which the user's name, picture and role can be displayed.

Building the menu hierarchy

You can predefine a menu hierarchy, that can be later used in the NavBar comopnent. You can predefine menus in the application Startup class, using the createMenus method.

Creating a menu

To create a new menu, you have to use the createMenu() method as shown in the below example:

The Navigation menu item

Navigation menu items open pages automatically. These menu items cannot have event handlers added to them manually, they are added automatically. Creating a navigation menu item, which will open the specified page (that has “targetPageId” as its ID) when clicked on:

        JBStrap.addMenuItem("menuName", "menuItemName", Icon.FLASH, "Menu item title", MenuOperation.OPEN_PAGE, "targetPageId");
       

Custom menu items

Custom menu items have their own custom click event handlers. These menu items do not have the page opener event handlers added to them. Thus, if you want to open a page with a custom menu item, the menu item’s event handler must have these implemented. Creating a custom menu item with a custom event that will run the myMenuAction event when clicked:

        JBStrap.addMenuItem("menuName",
    new MenuItem("menuItemName", Icon.FLASH, "Menu item title")
        .addClickHandler(event -> myMenuAction())
);
       

Placing a predefined menu to the NavBar

        NavBar navBar = new NavBar()
	.setBrand("Brand name")
	.addMenu("menuName", "Menu name title", getCurrentUser());
       

Dynamically placing a menu item on the predefined NavBar menu

You can dinamyically expand the menu hierarchy on an already displayed NavBar

        //Creating a NavBar, based the menuName predefined menu.
final NavBar navBar = new NavBar()
	.setBrand("Brand name")
	.addMenu("menuName", "Menu name title", getCurrentUser());

//Placing the menuItemName2 menu on the NavBar
final NavBarItem navBarItem = navBar.createItem("menuItemName2", Icon.ADDRESS_BOOK, "Menu item title")
	.addClickHandler(event -> myMenuAction())
	//Adding a submenu to the menuItemName2 menu
	.addItem("subMenuItemName", "Sub menu item title")
	.addClickHandler(event -> myMenuAction())
       

Supported events:

Show, Hide, Animations, Drag&Drop

Style customization

Name	Default value	Derived value	Computed value	Comment
$navbar-bg-color	$light	$navbar-bg-color-->$light-->mix(#f8f9fa, #e9ecef, 50%)	mix(#f8f9fa, #e9ecef, 50%)	Sidebar background color.
$sidebar-border-radius	$border-radius	$sidebar-border-radius-->$border-radius-->0.25rem	0.25rem
$sidebar-width	$sidebar-font-size * 18.5	$sidebar-width-->$sidebar-font-size * 18.5-->1rem * 18.5	18.5rem
$sidebar-pinned-width	$sidebar-width / 3	$sidebar-pinned-width-->$sidebar-width / 3-->($sidebar-font-size * 18.5) / 3-->(1rem * 18.5) / 3	6.16rem
$sidebar-brand-height	$font-size-base * 4.2	$sidebar-brand-height-->$font-size-base * 4.2-->1rem * 4.2	4.2rem
$sidebar-footer-height	$font-size-base * 2.7	$sidebar-footer-height-->$font-size-base * 2.7-->1rem * 2.7	2.7rem
$sidebar-scrollbar-width	$scrollbar-width	$sidebar-scrollbar-width-->$scrollbar-width-->0.36rem	0.36rem
$sidebar-scrollbar-height	$scrollbar-height	$sidebar-scrollbar-height-->$scrollbar-height-->0.71rem	0.71rem