Tabs

Improve usability and content organization with beautiful and responsive tabs.

Act2 Tabs Sample

This component is available as a custom module or entirely drag and drop for more content choices and better customization. Find both implementations on Act21 Tabs template.

Custom module

The custom module is named Act21 Tabs:

Act2 Template Builder Tabs Custom Module

Module options

Tabs

Edit, add, remove or reorder tabs:

Act21 Tabs module add tabs

Tabs animation

Uncheck this box if you want to disable the animation when changing tabs.

Act2 Page Editor Tabs Animation

Custom class

Use this box if you want to add a custom class to your module at the page level.

Act2 Page Editor Tabs Custom Class

Each tab has these editable fields:

Label

Act21 Tab Label

Content

Act21 Tab Content

Custom anchor

Use this for custom anchors instead of the default #tab1, #tab2, etc. No spacing or special characters allowed, except alpha-numeric characters and - or _.

Example: inbound_marketing_2018

By default this is blank.

Act21 Tab Custom Anchor

Drag and drop

Tabs container

Add a group with these classes: tabs-container responsive styled

Act2 Template Builder Tabs Container CSS Classes

The tabs-container class is required. The others are optional and can be removed if your design requires it.

The responsive class is used to create the accordion navigation on mobile by clonning and adding each tab link before its related content. It's not styled by default:

Act2 Tabs Container Responsive Not Styled

To include the styles add the styled class as well:

Act2 Tabs Container Responsive Styled Sample

Or you can use a custom class if you want to apply your own styles.

Important: everything should be placed in this group, both your tabs navigation and content.

Tabs nav

Act2 Tabs Nav Sample

Add one Act21 List module (or any module/group that can contain links) inside your Tabs container group with these classes: tabs-nav mb80 sm-hidden

Act2 Template Builder Tabs Nav CSS Classes

The first class tabs-nav is required, the others are modifiers for adding bottom margin and hidding this module on small screens, where we'll show the reponsive navigation instead.

If you choose not to use the responsive class, you can also remove the sm-hidden class from your Tabs nav, to keep showing the initial navigation on mobile as well.

Edit the items to add your tab names and links:

To properly link to your tab, you must first add a #, followed by the ID of your tab group, as shown in the Tab content section below.

Tab content (Tab group)

Add a group for each of your tab content with the class tab-group and an unique ID:

Act2 Template Builder Tab Groups

The ID should be unique per page. Also, please make sure your links in the Tabs nav point to the correct IDs. For example, if you have this ID on one of your Tab groups: my_new_tab_1, the anchor that links to this tab content in your Tab nav should be: #my_new_tab_1. Please notice the leading #.

The sm-p20 class, used to add padding on mobile, and the animation class fade-up in this example are optional.

For more utility classes please read this article.

For more animations read this article.

Now you can have whatever layout or modules in your tab groups.

Here is a video to demonstrate the entire process:

Using Act2 with the old Design Manager? Read this documentation.