Cookies help us deliver our services.

By using our services, you agree to our use of cookies. Learn more

I understand

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.