Sidebar Navigation without load effect

Hello,

I’d like to create a sidebar navigation that would be similar to the one below and also in many CRM systems -

You can find this one here: Bubble | No-code apps

I’ve created the sidebar using a floating group and I have no problem with this part at all. My problem at the moment is figuring out how to create a navigation that feels more like moving from one tab to the other when I click on one item in the bar, instead of loading a whole new page. How should the implementation of this be -
Should I create separate pages for each item on my sidebar and whenever it’s clicked, a whole other page will have to be loaded? Or is there a better way to do it?

My worry is that if I’m loading a new page every time the item is clicked, it will look/feel really bad for the user.

I’m sure there’s a better way to do it that I’m just unaware of. Any help?

Hey :wave: @mohamed1

You should use set states and have everything on the same page. Just make the page very long and make sure to collapse the height of the elements when hidden.

Does that make sense?

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes

Thanks @J805 - any recommendation/recommended read that covers the best way to use states for this? I’m a bit uneasy with using states in bubble right now.

Also, thank you so much for your answer!

Also, in case you might know, is there a way to make my floating group sidebar collapsable while making the rest of the page responsive when that happens? I’ve read around the forum quite a bit but didn’t seem to find a good answer around - thought I might ask.

Try this for set states: Set States FREE Video Tutorial 🎉

1 Like

Let me look for an example for you too look at. I do this on my members only site. You can dynamically change the border or put a group underneath it that hides at the same time as the floating group. :blush:

@J805 That’s perfect - thanks for the video!

If you could share with me the example on your site and how it’s created (dynamically changing the border etc.) I’d be really grateful.

Thank you again!

Here is an example for you on what it would look like.

Editor: https://bubble.io/page?type=page&name=menu&id=805testapp42&tab=tabs-1

Preview: https://805testapp42.bubbleapps.io/version-test/menu?debug_mode=true

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes

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