Download Free Buy Pro

Tabs is based on the Bootstrap tabs. So Tabs uses and needs the Bootstrap framework (styles and scripts).
This means that Tabs will only function correctly if your Joomla 3 template allows the Bootstrap framework to be loaded and does not cause conflicts with the jQuery and bootstrap javascripts.
Tabs are not very user friendly for mobile devices, because of the horizontal space they need. That is why Tabs has an alternative view for mobile screen sizes. On this demo page, that option is switched on. So the tabs on this page are not visible as actual tabs, but as a list which will link to the different sections.

Simple set

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Individually styled tabs

To add an extra class to a tab (for styling purposes), you can use:

{tab My Title|myclass}

Tabs' stylesheet comes with styling for the classes blue, green, orange, red and grey.

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

You can also use the Bootstrap classes info, success, warning and danger.

Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Oldschool styling

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Custom styling

You can also add your own classes and style them however you want. Here are 2 examples of what you can do.

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Styled tab titles

Title with some styled text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Active/inactive titles

This functionality is ONLY available in the Joomla 3 version!

This feature has been added in version 4.0.0

You can have a different title when the tab is active and inactive using the title-active= and/or title-inactive= attribute.

This tab is now active

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Active tab

This tab is now active by default!

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Page scrolling

This functionality is ONLY available in the Pro version!

Normal Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nested Tabs

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example Tab 1

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Example Tab 1.1

Example Tab 1.1.1

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Alignment

In the Tabs system plugin settings you can set the alignment of the tabs: Left, Right, Center, Justify or the Default (defined left or right by language RTL setting).

You can overrule this setting on a Tabs set level by adding a class to the first tab tag in the set (align_left, align_right, align_center or align_justify).

Left

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Right

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Center

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Justify

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Positioning

This functionality is ONLY available in the Pro version!

This functionality is ONLY available in the Joomla 3 version!

In the Tabs Pro system plugin settings you can set the positioning of the tabs: Top (default), Bottom, Left or Right.

You can overrule this setting on a Tabs set level by adding a class to the first tab tag in the set (top, bottom, left or right).

Top

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bottom

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Left

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Right

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Access restriction

This functionality is ONLY available in the Pro version!

This functionality is ONLY available in the Joomla 3 version!

This feature has been added in version 4.0.0

You can set the access level to a certain tab with the access= or usergroup= attribute.

{tab This tab is only for visitors|access=Guest}
    [TEXT]
{tab This tab is only for registered users|access=Registered}
    [TEXT]
{tab This tab is only for Authors and Editors|usergroup=Authors,Editors}
    [TEXT]
{/tabs}

Tabs also works in modules and anywhere else you can enter text.

Isn't

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.