In this guide, we will build an interactive tab bar with individual content per tab.

Interactive prototype - click to interact:





Build the basic structure



As a reference, this will be our final structure:





First let’s create the basic elements.

Tabbar

Create a rectangle Tab and place a text element inside. Apply styling as you like. Then set the width to shrink. Also give it a minimum width to make it look more consistent with different content lengths. Optional: Add an indicator for the active state

Now create a widget from it. Next add predefined states Mouse Over and Pressed. We also add a custom state named Active. Apply styling as you like.

Duplicate the Tab widget and group it horizontally. We call this group Tabbar, apply styling as you like.



Tabbar Content

Next we need a container for our Content: Let's create a rectangle TabContent .

• Set height and width to stretch.
• Create a widget from it.
• Set the content to individual
• Add a custom state called Collapsed .
• In this state, set the visibility to collapsed.

Add content to the TabContentas you like.

The result could look something like this:







Make it interactive

Tabbar

Only one element should be active at a time. To achieve this, we add a left click event to our Tab element in the interaction inspector. Then we choose a state change action and select the Active state.



So now the clicked element will be switched to active. Still missing: all the other elements should be switched to the normal state when we activate a tab.

Therefore, we add another action. Select change state but now we do not select "This element" instead, we choose "Siblings with the same widget type". As state we select Normal. This applies the action to all other elements except the selected one.





The final interaction structure should look like this:





After adding these interactions, it is recommended to duplicate the element with the interactions on in. This will save you from copy-and-pasting all the interactions to different elements.

Try out the interactions and see if everything works accordingly.



Tabbar Content

Based on the number of tabs you want to have, we need the same number of TabContent elements. Create and fill them now.

Just like with the tabbar we use a similar technique here. Basically we only want to have one TabContent visible at a time with the only difference, that we have to link the specific content element on every tab element interaction.

• Select the first tab
• Add a new group to the existing event
• Link the correct TabContent element
• Switch the widget to the normal state



• Duplicate the action with ⌘ + D
• Like before choose Siblings with the same widget type
• Choose the Collapsed state



The final interaction structure should look like this:





Optional:

For a smoother transition when switching the content, you can add a Fade in effect after the Change state action.





Now copy the action group to all of your tab elements, but remember to replace the cell linked in the group to the corresponding TabContent element.