Menubar Navigation component

The component places a menu bar on the top of the page. The menu bar can build itself automatically, based on the menus, created in the Startup class. The component also accounts for the logged in user's access rights, when building the menu. Menu items can also be added through custom implementations.

The menu items on the component can contain submenu items, which are placed under their parent (root) menu item. Moreover, custom event handling can be assigned to each individual menu item, if the item is not used for navigation.

Menus must be defined in the JBStrap framework. Metadata here can be used to build the NavBar and MenuBar components. Multiple menus can be created that can be referenced by their names.

As a first step, the menu must be created. To do this, specify a name. The created menu can have menu items assigned to it that can be navigation items, or custom menu items.

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())
);
       

Adding a predefined menu to the MenuBar

        final MenuBar menuBar = new MenuBar()
		.buildFromMenu("menuName", getCurrentUser())
		.setBrand("Brand name");
       

Adding a menu element dynamically to an existing menu in the MenuBar

It is possible to dynamically expand the menu hierarchy on an already displayed MenuBar.

        //Create menuItemName2 menuitem with a submenu
final MenuItem menuItem = new MenuItem("menuItemName2", Icon.ADDRESS_BOOK, "Menu item title")
		.setClickHandler(event -> myMenuAction())
		//Adding submenu
		.addSubMenuItem(
			new MenuItem("subMenuItemName", Icon.ADDRESS_BOOK, "Sub menu item title")
			.setClickHandler(event -> myMenuAction())
		);

//Create a MenuBar, based on an existing menu ("menuName"), and adding the "menuItemName2" menu
final MenuBar menuBar = new MenuBar()
		.buildFromMenu("menuName", getCurrentUser())
		.setBrand("Brand name")
		.addMenuItem(menuItem);
       

Supported events:

Show, Hide, Animations, Drag&Drop

Style customization

This component does not have specific variables to use for style customization. However, you can use custom style classes and Bootstrap variables to change the appearance of this component.