The extension for Contao that provides missing tabs functionality for front end. Easily create user-friendly tabs that are fully responsive and work on every device. Because of its structure, the tab content can contain literally any content you wish - texts, images, videos, forms, modules, etc. The tab trigger is also not limited to a single text as you are able to enter any HTML markup in it. Everything works out of the box and the only requirement is that you need to have jQuery enabled on your page.

The module provides 4 new content elements based on the origins Contao wrapper elements concept. The example tabbed navigation setup looks as follows:

  • wrapper start
    • tab start
      • content element 1
      • content element 2
    • tab stop
    • tab start
      • content element 3
    • tab stop
  • wrapper stop


The product comes with 10 different ready-to-use layouts. Horizontal types: top left, top center, top right, top compact, bottom left, bottom center, bottom right, bottom compact. Vertical types: top left, top right.


By default the tabs switch immediately without any animation. To make them a little bit more fancy, you can choose one of the 9 animations available: fade, horizontal slide, horizontal slide reversed, horizontal slide left, horizontal slide right, vertical slide, vertical slide reversed, vertical slide up, vertical slide down. Each of the animation can also have a custom duration and easing.

Themes & Style designer

Tabs come with the default stylesheet and a few themes out of box which can be replaced by your own style rules. The built-in style designer allows you to comfortably manage the design of your tabbed navigation. Designer includes options such as tab font, background and border colors as well as the tab spacing. Additionally, you can also adjust the look of the content container by setting content border and background color and the padding of that element. Styles can be also easily overridden by your external style sheets, which gives you the unlimited possibilities of the end result.

Deep linking

The deep linking feature allows you to track which tab is currently active by adding the hash to the URL. Such links can be shared revealing the desired tab content immediately when somebody clicks the link.

Mobile support

Tabs are a fully responsive solution that works on every device and screen size. On the mobile devices tabs simply turn into an accordion with an optional animation on collapsing/revealing the elements.

Product details

15 times
Contao 3.5, 4.4, 4.9, jQuery 1.9+, Chrome, Edge, Firefox, IE 9+, Opera, Safari, Android, iOS