Tabs are widely used across the web. It's useful and convenient way to build a navigation system for your app.
In this tutorial, we are going to learn how to create this type of tabs for your Bubble app :
Step 1 - Build your Bubble Tabs UI
Building tabs in Bubble is pretty straightforward, but there is a small trick you need to know.
To make your Tabs responsive, you need to make sure they become horizontally scrollable when needed.
This way you ensure Users will still be able to use them on Mobile.
The best way to do this is to use a Repeating Group to build our Tabs UI.
Not only will this make our tabs responsive, it will also make them much easier to maintain, since you will only need to modify the main Tab, and all the changes will be applied to the other Tabs.
So let's get started :
Let's start by adding a Repeating Group to our Page, and give it the following settings :
As you can see above, I unchecked the "Fit width to content" checkbox. This is important to make sure that Repeating Group will become horizontally scrollable later on.
If you want to learn more on how to achieve Horizontal Scroll in Bubble, we made a tutorial on that --> Click here to read it
Now that is Repeating Group is set, we can start creating our Main Tab. This is our Tab "Template" in some sort.
So let's start by adding a Group into our RG as well as a Text element for our Label.
In this example I'll be making this type of Tabs :
You can style it as you want. In this article we'll focus more on making it work !
Alright, now that we've got our Main Tab, we need to add a Data Source to our Repeating Group.
Here you have two main approaches :
1 - Using Dynamic Data
This method is good if you want to use something that is stored in your Database or as an Option Set.
For example if you're building a Task manager, you might to use these Tabs to filter tasks by their Status (e.g Pending, Completed, Late etc...)
In this case you'll want to use dynamic data, like follows :
A - Add your content type and your Data source to the RG (can be an Option Set or a Data Type)
B - Set the Content type and the Data Source on your Tab's Group
C - Set your text Element to display the Label
And there you go. You should now see your Labels displaying correctly !
You can move to Step 2.
2 - Using Static Data
In some other cases, you might to use Static Data (i.e text).
It can be useful in order to avoid creating a new option set or new data types for examples.
To do this, you can use the operator "arbitrary text" in combination to the "split by" operator.
The "split by" operator will convert a single text into a list of text, based on a specified separator.
Here's how to do it :
A - Set your Repeating Group's Data Source and Content Type
Now as said earlier you'll need to use an arbitrary text combined with a "split by" operator, like below :
B - Set your Tab's content type and Data source
C - Display your Tab into the Text Element
And there we go, how Repeating Group now has the right content.
Let's move to Step 2
Step 2 - Build your Tabs workflows
Alright, now that we've got everything setup, we can move on to building the logic that will make our Tabs alive !
2A - Create a custom state
To do this, we'll first need to create a Custom State that will store the Active Tab.
You can attach it where you want, but in my case I like to add onto the Repeating Group. It makes it easier to duplicate it if you want to reuse it.
IMPORTANT : Make sure that the type of your Custom State is the same as your Repeating Group's.
Also, make sure to set a Default Value if you want to have a Tab selected by default.
2B - Create our workflows
Now that we have our Custom state ready, we need to actually update it when a Tab is clicked.
To do this, simply add a workflow to our Tab's group.
This workflow will use the "Set state of an element" action :
And voilà ! Nothing difficult.
Step 3 - Making our Tabs react
Now that our Custom state is being updated correctly, we need to actually reflect those changes, i.e to make the Tab have an "active state".
To do this, we can add some conditions to our Tab's Group and it's label.
The number of properties of your conditionals will depend on the design you want, but the conditions will be the same as below.
Basically, you want to reference your custom state (in my case it's Repeating Group Tasks statu's activeTab) and compare it to the value of the Current Cell of your Repeating Group.
If it's the same value, then it means that the Tab selected is this one, and that you need to modify it's style.
And there you go, all you need now is to adapt it to your own design !
Step 4 - Display the right content
Now that we have our Tabs made, we need to know how to actually display the corresponding content.
Well this is pretty basic.
All we need to do is to use the value stored in our Custom State to add conditionals to display the Right thing when needed.
Here's how to do this :
1 - Hide your elements by default
2 - Add a conditional to make them appear when needed
And there you go ! Repeat the operation for your other content containers and you'll be good to go !
3 (optional) - If you want to filter a Search
On a side note, you could also use the value of your Custom State in a Search Constraint.
This would be useful for filtering out Repeating Groups based on the Tab selected (for example, showing only completed Tasks when the tab "Completed" is selected).
