Tabs

The extension for Contao provides missing tabs functionality for the 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 four new content elements based on the origins of the 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

Layouts

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.

Animations

By default, the tabs switch immediately without any animation. To make them a little bit fancier, 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 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 design creator allows you to comfortably manage the design of your tabbed navigation. The designer includes options such as tab font, background, and border colors, as well as tab spacing. Additionally, you can also adjust the look of the content container by setting the content border and background color and the padding of that element. Styles can also be easily overridden by your external style sheets, which gives you unlimited possibilities for 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 mobile devices, tabs simply turn into an accordion with an optional animation on collapsing/revealing the elements.