Pro Tabs

This element allows you to easily build accessible nestable tabs in Bricks, with support for the following features:

• Accessibility built-in.
• Accordion layout option for smaller screens.
• Fully nestable element, including accordion toggle + icon, everything editable visually in Bricks.
• Ability to dynamically populate tabs with query loops.
• Support for tabs being used inside other query loops.
• Option for horizontal scroll tabs.
• Animations for tab & tab content.
• Adaptive Heights.
• Support for using Bricks animations inside tab content on elements (with the option to disable animations for mobile accordion layout).
• Supports all Bricks’ interactions inside tab content area.
• Out-of-the-box support for use with facet plugins (WPGB, JetSmartFlters, Piotnet Grid).

Walkthrough Video

Adding tabs

Each tab is really two parts, the tab item and the tab content item. For every tab item, there would need to be a corresponding tab content item. Within the nested structure, it’s important to always remember that the ‘items’ are the parts you want to duplicate to create more tabs. Tab item and Tab Content Item.

If you wish to populate dynamically, these ‘item’ elements are where to apply the query loop.

Once the query loops are in place, you can then use dynamic tags to populate the content of the tabs dynamically.

Adding in tab content

The entire structure is built with native elements, mostly blocks. The block where to add in the content for the tabs is called ‘Tab Panel Content’.

Mobile Accordion

One of the key features of the Pro Tabs element is that it can shrink down to an accordion for smaller screens at the chosen breakpoint.

Each tab content item has its own accordion toggle, which by default contains the typical text & icon, but as the entire element is nestable, this can be customized entirely and styled separately to other parts of the element.

These are separate elements and so can either be customised from the Pro Tabs settings, inheriting the styles that have been set there, or can be selected in the structure and customised by adding classes etc.

Important to note, that you’re viewing the ‘tab content’ part of the structure when viewing the mobile accordion layout.

Tab List

The tab list controls apply to list of tabs which the user interacts with.

Tab Width: By default the tabs will take up the width of the content inside one, here you can set a width instead.

Flex grow tabs: Enabling to add flex-grow 1 to the tabs, meaning they’ll take up the available space (for example if there are two tabs, they’ll take up 50% each).

Tab Wrap / Scroll: Choose for the tabs to wrap, nowrap, or horizontal scroll. Horizontal scroll means the tabs will be allowed to be more than 100% of the available space and can be scrolled to.

Active styles – The typography, border, and backgrounds can be changed for the current active tab separately. These styles will also be inherited onto the mobile accordion toggle if used.

Tab Content

In the tab content settings you can apply the styles that will apply to all tab content areas in one go.

Animations

Animated Tabs – Instead of just changing the background/colors for the active tab, enabling the animate tabs option will add a little slider that makes the active tabs appear to move across each tab. (similar to how it’s done in the toggle switch element)

Animate Tab Content – Choose from a number of fadein animations for the tab content. For more control, the Bricks interactions can also be used to add animations on any elements inside the tab content that will play each time the tab is selected (This can also be disabled for the mobile accordion).

Behavior

Change some of the behaviors to best fit your use case.

Allow hover to select tabs – Will automatically activate the tab as soon as the cursor hovers over it. Useful if using the tabs inside a mega menu dropdown, where it creates a nicer experience being able to hover through the items.

Allow tabbing to unselected tabs – Note that is OFF by default. The common behaviour for keyboard users when it comes to tabs is to be able to tab into the content area from that active tab, not to move to the other tabs. Left/right keys are for moving between different tabs and then the tab key is for moving into the active content area (as can be seen here). However, if you do need the unselected tabs to be tabbable for your use case, enable this setting. (if you’re unsure, leave this disabled)

Adaptive Height – For the desktop-tab layout, this option will add a smooth transition for the overall height of the tabs content element to fit the new height of the active tab.

Note that if you’re using the adaptive height feature and are styling the tab content separately, like adding background colors or borders, it’s best to add these styles to the tab content element itself rather than the individual items inside. This way you get the benefit of actually seeing the transition on the element which is changing height.

Hash / Scroll-to

This feature allows you to use hash links to open specific tabs when the user lands on the page, or clicks a hash link somewhere on the same page.

The IDs to link to are the ‘Tab Panel’ element IDs. These are the elements underneath the accordion toggle so this feature can be used for both the tab layout and the mobile accordion layout.

If using a query loop – If you’re populating the tabs with query loops, then the Tab Panels won’t be using their regular IDs as Bricks removes them. In this case, just give your Pro Tabs element a custom ID, for eg ‘#question’, and then each Tab Panel will be given an incremented ID, #question-1, #question-2, #question-3 which can then be linked to, selecting the correct tab.

URL parameter

In BricksExtras v1.4.1+ a URL parameter can be used to open a specific tab. This can be useful if you still need the hash in the URL to scroll to a particular element, but need a certain tab to be open at the same time.

Similar to the above hash option, use the tab panel ID as the value to identify which tab to open. If the tab panel ID was question-2..

your-site.com/?tab=question-2

Then if you wanted to scroll down to the section when the page loaded, rather than the tab panel itself, the section ID can be added. (Bricks would then handle the scrollto functionality as if it were a regular hash)

your-site.com/?tab=question-2#your-section

The ?tab key can be customised in the settings.

Tutorial