How can I create tabs within the same app page?

Hi,

Basically I want my app to have tabs within the same page.
If the user clicks different buttons, different data (perhaps contained by a group) will appear on the exact same position, kind of like tabs in a browser… however, I am not sure how to position those groups at the same spot, and be able to edit them just the same… are there sort of different layers I can customize on the same page of the app? (like they have in illustrator and photoshop?)
I hope you can picture and understand what I mean :stuck_out_tongue:
Thanks for the help!

1 Like

Hello, @skillsavvyapp! It is pretty simple to do this.

The easiest way that I have found to do this is to create a page state with the data you want on a certain tab. After that, all you have to do is link the buttons to which page state you would like to show.

I wish you the best of luck with the info that I have given you. If you need further help, feel free to ask!

I kind of understand what you mean, but it’s the tab itself I am not sure how to create …
Also there will be inputs, buttons, and repeating groups on those tabs (influenced by the input and the button), not just flat text data, so I don’t know if that changes anything?

Thanks for your help!

The best way to create the “tabs” that you would like is to create a new floating group with the buttons in it. From there, you can link the buttons to the page states that you would like. In the page states, you can have any element you would like within it.

Hope that helps!
-The Whitigol Team

Hi @skillsavvyapp!

You might want to experiment with the Tab element that is built-into the editor:

32%20AM

It’s a good way to see how this can be done.

1 Like

Yes. @mebeingken’s way is another option as well. It is less confusing and requires less time/work. But to get full effect and later on you can add things like animation and a lot more. You may later on choose to do the “page state” method.

1 Like

I cannot believe I missed this! Thanks so much for taking the time to answer!!!

Thank you! I will look into it as well!!! :slight_smile: Appreciate it!

1 Like

If you need any further help, feel free to reach out on here of on discord (Whitigol#2122)

@skillsavvyapp, welcome to Bubble! You may be interested in this lesson on LearnTo.

How to build a tabbed group from scratch:


Dan (creator of LearnTo - 15+ hours of Bubble tutorials and live coaching)

5 Likes

that is super helpful! Thank you!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.