website logo
HomepageCommunitySign up & Download for free
⌘K
USER MANUAL
User Interface
General
Styling
Color Management
Widgets
Presentation & Interaction
Interactions
Sharing & Export
Resources
JavaScript
Embedded HTML
Custom CSS
Plugins
Cloud
General
Account Registration
Projects
Prototypes
Subscription, Licensing and Billing
Single Sign-On (SSO)
Company Profile
Types of Users
User Management
Commenting
Sharing
Public Link
Embed Code
Prototype Settings
User Profile
FAQ
Tutorials
How to build
Interactive dropdown
Interactive tab bar with content
Modal dialog
Table
Input field
Upload and share prototypes
Changelog
Docs powered by archbee 
16min

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:





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.



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



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.

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

  • 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.

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

Why not build a Modal dialog now?



Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Modal dialog
Docs powered by archbee 
TABLE OF CONTENTS
Build the basic structure
Tabbar
Tabbar Content
Make it interactive
Tabbar
Tabbar Content
Optional: