Customizing the nav sections

The default AdminWebLayoutTemplate builds a single AdminMenu that is supposed to hold all items that make up the UI nav structures. The same AdminMenu is used to render the different nav components on the layout:

  • top navigation

    • the top navigation actually consists of a left-hand (navbar) and right-hand (navbar-right) side

  • left-hand navigation

  • breadcrumb

All nav structures are built using a NavComponentBuilder from the BootstrapUiModule and support all options like HTML attributes, icons and custom ViewElements.

Default AdminMenu structure

By default the AdminMenu contains 3 items:

  • the root item (/)

  • the user context item group (/user-context)

    • this group is rendered only on the right-hand side of the top navigation

  • the logout link as member of the user-context (/user-context/logout)

These default items can be customized using the AdminMenuEvent.

Example replacing the default user-context icon by a user profile picture
private ViewElementBuilder myProfilePictureViewElementBuilder;

@EventListener
public void addUserProfilePicture( AdminMenuEvent adminMenuEvent ) {
	adminMenuEvent.builder()
	              .group( DefaultAdminMenuRegistrar.PATH )
	              .attribute( NavComponentBuilder.ATTR_ICON, myProfilePictureViewElementBuilder );
}

Adding a page to the main nav section

If you want to add a page to the main navigation section of admin web, you can do so by simply registering it in the AdminMenu. The easiest way to do that is by intercepting the AdminMenuEvent.

Example creating a custom admin web controller
@EventListener
public void registerMenuItem( AdminMenuEvent adminMenuEvent ) {
	adminMenuEvent.builder()
	              .group( "/group", "Demo pages" ).and()
	              .item( "/group/page", "My demo page", "/demo/page" );
}
Relative urls added to the AdminMenuEvent will be considered admin web relative, and will get prefixed with the admin web root path. If you want to avoid this, either use absolute urls, add a specific prefix or begin them with an exclamation mark (!).

Specifying a nav section

By default any item will be added both to the top navigation and the left-hand navigation. You can limit the sections an item should be added to by adding a value for adminMenu:position attribute on a Menu.

The value can be either a String or a String[].

Possible positions are:

  • navbar: render the item in the top (left) navbar

  • navbar-right: render the item in the top right navbar

  • sidebar: render the item in the left sidebar

Example adding a menu item to the top right and sidebar navigation
@EventListener
public void registerMenuItem( AdminMenuEvent adminMenuEvent ) {
    adminMenuEvent.builder()
                .group( "/tools", "Tools" )
                .attribute(
                    AdminMenu.ATTR_NAV_POSITION,
                    new String[] { AdminWebLayoutTemplate.NAVBAR_RIGHT, AdminWebLayoutTemplate.SIDEBAR }
                );
}

Excluding an item from the breadcrumb

By default all Menu items will be included in the breadcrumb. Explicitly excluding an item can be done by setting the adminMenu:breadcrumb attribute to false.

Example excluding a menu item from the breadcrumb
@EventListener
public void registerMenuItem( AdminMenuEvent adminMenuEvent ) {
    adminMenuEvent.builder()
                .group( "/tools", "Tools" )
                .attribute( AdminMenu.ATTR_BREADCRUMB, false );
}
« Creating admin web controllers Customizing the nav sections User context menu »