How to Use the Tabs Block

Tabs Block

The Tabs Block separates your content into different sections, where each section can be viewed one at a time by clicking on its corresponding tab.

Stackable’s Tabs Block allows you to add different types of blocks within a tab. This opens up a lot of creativity on how you can present your content in a way that saves time and space.

When to Use the Tabs Block?

You can use the Tabs block to:

  • separate a large amount of related content
  • categorize information under different tabs
  • make content accessible without loading another page, or using more screen space

Tabs Block Structure

Stackable’s Tabs Block consists of Tabs, Tab Labels and Tab Content.

Tabs

This is the main Tabs Block area.

Tab Labels

Tab Labels are the tab controls used to navigate between the Tab Content.

Each tab inside the Tab Label has a corresponding Tab Content area that can be edited.

Tab Content

Tab Content is the area where the content for each tab is displayed.

Within the Tab Content, you will find Inner Column blocks for each corresponding Tab Label so you can edit your content in each tab.

Customizing the Tabs Block

First, add the Tabs Block to your page from the block library.

Tabs

Set the number of tabs in the Layout tab of the Inspector.

Choose which tab is open by default in the Initial Tab Open dropdown list. Each number in the list corresponds to the tab in the order it appears in the block.

Select between Horizontal or Vertical for the Tab Orientation if you want to display the tabs horizontally or vertically.

Use the Tab Panel Offset to adjust the space between the Tab Labels and the Tab Content.

Select between Fade or Immediate for the Tab Panel Effect, which decides how your content appears in the tab pane when a tab is clicked.

Just like other Stackable blocks, you can continue to design the Tabs block by adding a block Background, Borders & Shadows, and Top and Bottom Separators.

Tab Labels

In the Layout tab, you have the option to toggle on Full Width for Horizontal tabs.

When Full Width is toggled on, the tabs expand across the top of the block. You will have Text Alignment settings to align the Tab Labels on the Left, Center or Right.

When Full Width is toggled off, you will have Tab Alignment settings to align the Tab Labels on the Left, Center or Right.

Use the Column Gap to adjust the spacing between Tab Labels in Horizontal Tabs.

And Row Gap in Vertical Tabs.

These settings are responsive and can be edited in Mobile and Tablet views by clicking the Responsive Toggle Icons.

Toggle on the Scrollable Tabs on Mobile to enable users to scroll across the tabs on mobile devices.

Styling the Tab Labels

In the Tab panel of the Style tab, you can choose from the following Tab styles:

  1. Default
  2. Classic
  3. Button
  4. Centered Pills

Following this, you can customize the colors for the Button, Text and Icon (if Icon is turned on). You can apply hover states on these settings as well.

Use the Min. Button Height to adjust the height of the tabs, and Button Padding to adjust the space around the text in the Tab Label.

You can play around with Borders and Shadows on your tabs as well.

With Default and Classic tab styles, you can modify the individual sides of the borders.

Tab Active State

The Tab Active State refers to the tab that is presently selected. In the Tab Active State panel, you can customize the Button and Text Color for the active tab.

Adding an Icon

Toggle on Icon to include an icon in your Tab Labels.

Select or upload an Icon then choose an Icon Position.

You have the option to position the icon at the Left, Right, Top or Bottom.

Next, you can customize the Icon Color and Size in the settings that follow.

Use Icon Rotation to change the angle of your icon, and Icon Gap to adjust the spacing between the icon and the text label.

Tab Content

Tab Content is the area where the content for each tab is displayed.

When you select Tab Content, it will open up a dropdown list of Inner Columns. Each Inner Column inside the Tab Content corresponds to the tabs in the order it appears from left to right (Horizontal Tabs) or top to bottom (Vertical Tabs).

You can add any type of block into each of the Inner Columns to categorize your content accordingly.

The Tabs Block is one of Stackable’s most versatile blocks with built-in customizations for every part that makes up the block! With the Tabs block, you can display your content in a beautiful, well-organized way.