How to set up a tab trigger interaction

Overview

A Tabs Interaction allows you to add a Tab-triggered interaction for both when a tab is open (selected) and close (deselected). 

This opens up the possibility for an unlimited amount of creativity and interaction that can be placed not only on your Tab Links, but also on other elements on your page. Below is an example of Tab component that includes multiple Interactions.

Adding Interactions to Tab Links

The Tab Links are the elements that act as the trigger to switch between your different Tab Panes (i.e. the content in your tab). Adding interactions can lead to unique interactions when the user both clicks on a tab link, then clicks off the tab link.

Take a look at the examples below and follow the steps to recreate it. You can also watch this video, which demonstrates a nearly identical example.

STEP 1

First we need to style the tabs accordingly, and also add an Arrow Icon. The above Tab Links were designed by adjusting these Style Properties:

Width: The width of these Tab Links were adjusted to 23%

Margin Right: To give spacing on the sides of the tabs, a Margin of 2%was added on the Right of the Tab Link.

Increase Padding: The defaulted Padding was adjusted on the Top and the Bottom to be 13px each.

Fill Color: The Fill Color was changed to a light gray (#c0ccd1), whereas the Current Tab Link was given a Fill Color of Blue (#3496de).

We also gave a Class to the Arrow Icon, and assigned the following CSS Properties.

Position: So that the icon sits at the bottom of the Tab Link we changed the Position toAbsolute. Using the Absolute Position tool, we position it at the bottom.

Margin Auto: To center the icon, we have changed both the Right and Left Margin toAuto.

STEP 2

Now to add the Interactions! The first step is to click on the Tab Link (a non-current Tab Link), then navigate over to the Settings Panel. Here you will add a new Interaction.

STEP 3

The Initial Appearance will be left blank, so the next step will be to add a Trigger. Here you will select a Tabs Trigger.

STEP 4

The Interaction will be performed by duplicating what is in the image below. Notice there are two Interactions for both the Tab Open (when the tab is clicked), and the Tab Close (which will occur when you click a separate tab). That’s it!

STEP 5

Now to add a separate Interaction for the Arrow Icons. Simply click on the arrow Icon and repeat Step 2. This time around we will be adding an Initial Appearance to this interaction. In this case, we will choose to move the Arrow Icon up 6px, and have an opacity of 0%.

STEP 6

Repeat Step 3 and choose the Tab Trigger. The remainder of the Arrow Icon interaction will be as follows. You’re done! Be sure to add the Interactions to all of your Tab Links and Arrow Icons.