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:

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:

Placing a predefined menu to the NavBar

Dynamically placing a menu item on the predefined NavBar menu

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

Supported events:

Show, Hide, Animations, Drag&Drop

Style customization


Default value

Derived value

Computed value


$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

Related pages