Tabs

Make content tabs in Joomla!

  • Last updated: 15 Apr 2019
  • Version: 7.5.9
  • Types: System plugin Editor button plugin
  • Joomla rating: 100%

Examples for Tabs

Tabs is based on the Bootstrap tabs functionality. So Tabs uses and needs the Bootstrap framework (styles and scripts) that comes with Joomla core.
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

Individually styled tabs

Custom styling

Styling the tab title

Opened/closed titles

Default opened tab

Page scrolling Pro only

You can set Tabs up to automatically scroll the page to the top of the tab when you open a tab by clicking on it, clicking on a tablink or linking to the tab via the url.

You can modify this behavior per tab by adding the scroll parameter and set it to false:

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 an align parameter to the first tab tag in the set, which can have the values leftrightcenter or justify.

Left

Right

Center

Justify

Positioning Pro only

Top

Bottom

Left

Right

Nested Tabs

Access restriction Pro only

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

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