April 17, 2022
3 minutes

Creating a Navigation System in Bubble

If you are making a Single Page Application (SPA), you need some system to manage the complexity as your app scales in number of screens.To start with you can "hide" and "show" groups, but this quickly becomes unmanageable as you try to manage visibility states of sometimes hundreds of groups. I have seen Bubble apps with literally 100's of groups, and spent pointless hours digging deep into an app to untangle the messy screen states.

The way I do it is explained here:
And view it in the Editor here:

It's an initial investment to setup but pays off very quickly. One issue I see often with Bubble apps is that without a consistent way of organising a SPA, it becomes very complex to understand the state of an application's screens. You spend a lot of time trying to organise the "modal state" - which just means which screens are shown and not shown under what conditions.

This is an example of what I've evolved to using after much trial and error.   You also have a problem to solve - "Order of Operations". Bubble does not invoke workflow actions in the order they are in your workflows! Having custom workflows helps you manage this.

I accidentally discovered that my method of using custom workflows for navigation meant I avoided a whole lot of "order of operations" issues - https://manual.bubble.io/help-guides/building-workflows/the-basics#execution-rules

What is worse is when you accidentally delete some workflow - without separating the Navigation from the Element you clicked, when you delete an Element eg a Button, all the workflows behind that Element get deleted also - so if your tab needs some special actions to initialise it, these all get deleted. :-(

This leads you to cut and pasting workflow actions between elements - yuck!

If you have multiple entry points to a tab (common) then you centralise all your access through one workflow. What this means if

- you can added into your "goto xxx" workflow navigation metrics, eg Google Analytics

- you can use this centralised navigation to put in access controls, eg if User role is not XXX send them to YYY