Improve usability and content organization with beautiful and responsive tabs.
The custom module is named Act21 Tabs:
Edit, add, remove or reorder tabs:
Uncheck this box if you want to disable the animation when changing tabs.
Use this box if you want to add a custom class to your module at the page level.
Each tab has these editable fields:
Use this for custom anchors instead of the default
#tab2, etc. No spacing or special characters allowed, except alpha-numeric characters and
By default this is blank.
Add a group with these classes:
tabs-container responsive styled
tabs-container class is required. The others are optional and can be removed if your design requires it.
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:
To include the styles add the
styled class as well:
Or you can use a custom class if you want to apply your own styles.
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
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.
Add a group for each of your tab content with the class
tab-group and an unique ID:
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
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: