Tabs
How to add and style tabs.
What Are Tabs?
Tabs can be used to show a list of links or content in a tabbed format.
They are a common user interface component that allows users to navigate between different sections or views within the same page. Each tab typically corresponds to a different content panel.
Location in the Parts Library: Base Parts > Layout > Tabs
There are also tab parts in Page Sections, including:
Page Sections > Features,
Page Sections > Services,
Page Sections > FAQs,
Page Sections > Meet the Team, and
Page Sections > Contact Us.
Some Key Features of Tabs
Navigation - tabs provide a way to switch between different content sections or categories within the same page.
Content Organization - tabs help in organizing large amounts of content into manageable sections, improving readability and user experience.
User Engagement - tabs allow users to switch content dynamically, tabs can make interactions more engaging and efficient.
Tabs are a versatile and user-friendly way to organize content on websites and apps. They can enhance navigation, improve usability, and help in managing large amounts of content by breaking it down into easily accessible sections. Proper implementation of tabs can significantly enhance the user experience by providing a clean, organized, and interactive interface.
Adding a Tabs Part
Choose the tabs part most closely aligned with what you need from the Parts Library - either Base Parts or Page Sections.
Choose your preferred tabs part, select where you’d like to add it and click ‘+ add to page’.
The Components of Tabs
A Tabs part (parent) consists of two or more Tab parts (children). The Tab part houses the tab that you click on to reveal the content associated with that tab. The content is housed within a Tab Content part. The Tab Content part can include anything such as rows, columns, text, cards, images, or whatever you'd like to display. It's a versatile part!
Before we get into editing our tabs, it's important to see the relationship between the tab and the tab content.
In the example below, you'll see that each tab part (e.g. Tab 1) has associated Tab Content (with text saying Tab 1 Content), and so on for each tab part. The parent to all of these is the Tabs part:
Editing and Formatting Tabs
Like many other parts, borders, shadow, opacity, rounding, and spacing can be applied using the property editor on the right, once the tabs part has been selected. These properties can also be applied to tab parts and tab content (the children of Tabs).
The text within the tab part is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right.
Adding State Models and Values to Tabs
To set up the tabs correctly to reflect that tab parts and contents are all related to each other in a tabs part, each tab part needs to be assigned a value, and the parent tabs part needs to be given a model.
The property editors for these are shown below:
Let's use an example where there are two sets of Tabs on a page. One is about dogs, and the other is about cats:
Let's start with our tabs about Dogs.
Select the Tabs part, go to State Model, and give it a State - let's call it 'Dogs'.
Go to the first tab. Since it's about Pugs, let's give a value of 'Pugs'.
Go to the second tab. Since it's about Dalmations, let's give a value of 'Dalmations'.
Go to the third tab. Let's give it a value of 'Labradors'.
The tab will automatically default to the first one unless we specify, but we can go back to the Tabs part, go to the State Model, and give it a default tab to show - let's give it the default of 'Pugs'. The default needs to match the value of one of the tabs exactly in order for that tab to be shown as the default.
Now let's go to our tabs about Cats. It's important to know that each time you use tabs, they each need their own State Model.
Select the Tabs part, go to State Model, and give it a State - this one will be 'Cats'.
Go to the first tab. Since it's about Siamese cats, let's give a value of 'Siamese'.
Go to the second tab. Since it's about Maine Coons, let's give a value of 'MaineCoon'.
Go to the third tab. Let's give it a value of 'Persian'.
Go back to the State Model, and let's make it default to the Persian tab - let's give it the default of 'Persian'.
Tab Variants
To select a tab variant - boxed, bordered, or lifted - select the Tabs part to activate the right property editing panel. Then select 'Variant', and choose your preferred tab variant.
Sizing
Tabs come with preset sizes, as well as the ability to set the exact size. The preset sizes can be made responsive.
For example, you may want the tabs to be small or extra small on mobile, and larger on a laptop.
Changing the Colors of Tab Parts
Tabs have more color properties than most other parts. You can change the foreground and background color of tab parts, tab content, and the tabs parent part.
You can also change the colors of Tabs (and tab parts and tab content) in an active state, when focused, and on hover. These are done the same way for foreground and background color.
To change the color when the Tabs (or tab parts or tab content) are being hovered, select the Tabs (or tab parts or tab content) and open the 'Colors on Hover' editor on the right. Now you can set your preferred background and foreground color combination to signify that the Tabs (or tab parts or tab content) are being hovered.
The 'Color on Focus' editor on the right refers to the color of the Tabs (or tab parts or tab content) after it has been clicked, or if the user tabs to those parts.
The 'Color on Active' editor on the right refers to the color of the Tabs (or tab parts or tab content) when it is active.
The background colors of Tabs (or tab parts or tab content) can be a color gradient.
Adding Content to Tabs
To add or change content within the tabs, select the Tab Content within the Tab Part. Add whatever parts you like using the Left Toolbar, then editing using the property editing panel on the right.
Then go to the next Tab Part, and open the content by clicking on the tab part. Continue to add or change all of the content in each of the tabs.
Press play to watch the short video below:
Adding an Extra Tab to the Tabs Part
If you need to add an extra tab (or a few extra tabs) to your tabs part, that's easy. Select the Tabs part (the parent part). Then, go to the parts library Base Parts > Layout > Tabs, and add "A Tab Part with A Tab Content Part".
This will add an extra tab, with corresponding content, to the end. Here is an example:
When you add an extra tab to the tabs part, it will adopt any formatting that has already been applied to the Tabs Parts, such as the variant and the size.
Removing a Tab from the Tabs Part
To remove a tab part and it's related content, select the tab you would like removed. Be sure that the 'Tab' part is selected. Then go to the right property editing panel, and select delete by clicking on the trashcan icon. Here is an example:
Related Information
Last updated
Was this helpful?