Interactive tab bar with content

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

Interactive prototype - click to interact:

To follow these instructions more easily, we recommended using the same names as we do for each cell. You may download the final project file here.





Build the basic structure



As a reference, this will be our final structure:

Document image

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.

Document image

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 visibiility to collapsed.

Add content to the TabContentas you like.

The result could look something like this:

Document image





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.

Document image

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.

Document image

More information regarding siblings, children, ... can be found here.



The final interaction structure should look like this:

Document image



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.

Troubleshooting: If one or more elements do not work as inteded, check the linked cells: The tab element should have a asterisk (*), which means that the interaction refers to itself.



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
Document image
  • Duplicate the action with ⌘ + D
  • Like before choose Siblings with the same widget type
  • Choose the Collapsed state
Document image

The final interaction structure should look like this:

Document image



Optional:

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

Document image



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.

Congratulation, you just build your own interactive tab bar that opens its content!