oo
Analytics Cloud
Commerce
DXP / Portal
Liferay Cloud
Reference
Liferay UI Tag Library

Liferay UI Tabs

Tabs create dividers that organize content into individual sections. Content can be embedded or included from another JSP.

To add tabs to your app, use the <liferay-ui:tabs> tag and specify each tab’s name as a comma-separated list for the names attribute. For example, three tabs named tab1, tab2, and tab3, look like this in the JSP:

<liferay-ui:tabs names="tab1,tab2,tab3">

</liferay-ui:tabs>

Each tab requires a corresponding section to display content. Nest liferay-ui:section tags for each of the tabs. Within each section, you can add HTML content or add content indirectly by including content from another JSP (via the <%@ includefile="filepath"%> directive). The example snippet below is from the Calendar portlet’s configuration.jsp:

<liferay-ui:tabs
    names='<%= "user-settings,display-settings,rss" %>'
    param="tabs2"
    refresh="<%= false %>"
    type="tabs nav-tabs-default"
>
    <liferay-ui:section>
        <%@ include file="/configuration/user_settings.jspf" %>
    </liferay-ui:section>

    <liferay-ui:section>
        <%@ include file="/configuration/display_settings.jspf" %>
    </liferay-ui:section>

    <liferay-ui:section>
        <%@ include file="/configuration/rss.jspf" %>
    </liferay-ui:section>
</liferay-ui:tabs>

Tabs are a useful way to organize configuration options into individual sections within the same UI.

The example above uses some of the tab’s available attributes. See the Tabs taglibdocs for the full list of attributes.

Capability:
Development and Tooling
Deployment Approach:
Liferay PaaS
Liferay Self-Hosted
Feature:
Java Development