The best navigation for one page Bubble app

One-Page Apps in Bubble

There's no denying that one-page apps just like this one are a very popular way for building no-code apps in Bubble and for structuring your no-code app. Now personally I'm not a fan because a one-page app can very easily spiral out of control and you can end up with thousands of groups on your page which both slows down the Bubble editor and it slows down the experience to users. However, there are some advantages such as the fact that the whole page doesn't reload between each of the panels I've got here each of the groups that I'm choosing to display.

Using Custom States for Navigation

In this Bubble tutorial video, I'm going to show you a different way to achieve a one-page design that doesn't use custom states. At the moment when I click on orders or click on dashboard I'm setting a custom state to dashboard so that it knows which group to show. This is my dashboard these are my orders and now they have conditional statements on based on the custom state.

A Better Approach: URL Parameters

I'm going to show you a different way and I'm going to show you a way that I think has a huge advantage which is that it actually changes the URL so that if you wanted to link directly to the orders tab you can do so. If you're emailing back to one of your app users and saying this is what you need to do here's where you can find that button and you're using custom states you can't link them back like deep link or directly link them to the bit that you're referring to.

Introducing Planet No Code

Let me show you a different way but before I do that if you're learning Bubble you need to check out our website planetnocode.com. We've got hundreds of Bubble tutorial videos some which you cannot find on YouTube you can only find if you're a member at planetnocode.com.

Implementing URL Parameters

The way that we're going to do this is instead of using custom states we're going to use URL parameters. So I've got a repeating group here of views and views is an option set and I'm just going to update the workflow so instead of setting a state I'm going to navigate to a page but the same page that I'm on and I'm going to send a URL parameter and so I'm just going to say view equals current cell's view display.

Using Option Sets

Now that's because I'm using an option set. If you need a little reminder of an option set we've got a view option set here and this is going through each of my dashboard items and the reason I have that is because in a previous video I've shown how you can add in an icon into an option set using font awesome.

Testing the New Navigation

For now if I go back here and refresh it if I click on dashboard it adds to the URL. If I click on orders you'll notice it doesn't actually refresh the page the page didn't blink out and blink back in it simply updates the URL settings.

Setting Up Conditional Statements

Now if I go back to my panels or my sections I can set these up slightly differently. I can say clear that I could say get data from URL and say view is the key and these are my display or view option sets. I'll say when views is I'll just try this maybe I've got to use the display option that's not going to take it so when display is dashboard I'm going to show it.

Handling the Default View

I'm also going to add an or statement here because it goes dashboard is my first option so I'm going to say get data from URL view display is is empty. I'm going to copy this onto orders. I'm sort of a bit suspicious that by using option sets I might this might not work but I'm going to try and if it doesn't work I'll fix it.

Finalizing the Setup

So dashboard we're going to say orders let's test that so dashboard is dashboard is visible then orders settings. Okay yeah it works so let me put this into settings so that settings is visible.

Advantages of URL Parameters

Yeah this is the strength of doing it this way. Look I can refresh my page and because settings that data is in the URL it's going to take me straight back to settings. If I'd use custom states it would have taken me back to dashboards and you'll notice that we get the same quick the page is not blinking out each time I change what group is being displayed.

Conclusion

And so this is by using go to navigate go to to the same page and changing a URL parameter so that you can then dictate which groups are shown based on conditional statements.