Liferay 6.2 introduced many new features: one of these is the introduction of some new taglibs for the construction of the navigation bar in the control panel portlet, in order to allow a standard management for all the developers.

Let's see how to create a simple navigation bar with a 2 levels menu.

First of all you need to create a normal backend portlet to put, for example, in the site_administration.content section of the portal; after that, just insert the following code inside the JSP page:

<%
String toolbarItem = ParamUtil.getString(renderRequest, "toolbarItem", "view-all");
%>

<aui:nav-bar>
    <aui:nav>
        <aui:nav-item href="/..." label="view-all" selected='<%="view-all".equals(toolbarItem) %>' />
        <aui:nav-item dropdown="true" iconCssClass="icon-plus"
                      label="add" selected='<%="add".equals(toolbarItem) %>'>
            <aui:nav-item href="/..." label="user" />
            <aui:nav-item href="/..." label="organization" />
            <aui:nav-item href="/..." label="group" />
        </aui:nav-item>
        <aui:nav-item href="/..." iconCssClass="icon-download"
                      label="export" selected='<%="export".equals(toolbarItem) %>' />
    </aui:nav>
</aui:nav-bar>

The first thing is to get the optional request parameter toolbarItem that will be used to highlight the button you clicked; after that you start to build the navigation bar with the combination of the <aui:nav> and <aui:nav-bar> taglib.

The buttons on the navigation bar are displayed with the taglib <aui:nav-item> and some of its attributes:

• href, button render URL (don't forget to add the toolbarItem attribute);
• label, button label;
• selected, test the toolbarItem value to highlight the button;
• dropDown, must be set to true for the second level menu;
• iconCssClass, CSS class to use for the button icon.