Navigation through URL parameters with Option sets

A scalable way to handle navigation

Using the option set to navigate between pages and sections will help you build faster, avoid bugs and keep your app structure consistent. It also opens up a lot of possibilities around advanced navigation options such as in onboarding pages or more complex forms. It is our preferred means of navigation, especially in single-page apps.

By default, all pages across the template contain a Source Popup in which you will find a 🧭 Source - Navigation group. It is connected to the 🧭 Navigation option set.

The simple structure contains two attributes: a) section and b) tab. The option has to at least have a Section filled for it to work properly.

Inside the 🧭 Source - Navigation group you find the following logic implemented:

If this 🧭 Navigation option's section matches the 'section' value that you we get from URL parameters and if this 🧭 Navigation option's tab matches the 'tab' value that we get from the URL then pick this Option.

Note that if for example, the 'tab' URL parameter is empty it will still match with an option that has the 'tab' attribute empty.

You can see the logic implemented in the image below:

Having two 🧭 Navigation options using the same 'section' and 'tab' values will create a conflict since the logic defaults to picking the first option that matches the criteria. If you have to use the same attribute values for the same 🧭 Navigation option (for example for different pages), you may want to create a new additional attribute called 'page' and add it to the filtering criteria.

On every page you will find a 🧭 NAVIGATION Custom Event. The when triggering this event you need to pass at least 🧭 Navigation option from the option set.

For information on the basics of working with Custom Events in Bubble.io, refer to the official documentation.

Because we use option set Bubble allows us to pick the option from the list when triggering this event.

In the Custom Event you will find a 'Go to page' action that will always send 3 parameters to the page.

section
tab
UID - only used when navigating to a section or tab which requires data source. Read more about use of UID in the URL structure in this section.

All these parameters work automatically with Source Popup allowing you for seamless transitions between sections and at the same time displaying the data that you need.

Multiple subsections

If your section structure has multiple subsections you have to remember that their parent section e.g Details C does not exist on its own. In other words at least one of the subsections has to always be visible. That's why the conditional on the Section itself will contain the logic to make this section visible if 🧭 Source - Navigation 🧭 Navigation option is 'tab a', 'tab b' or 'tab c'

You can find the following logic implemented in the admin page under Details C section in the openBuild template.

🧭 Element Display

Since navigating in the reusable elements is a bit different, in the template you will find a dedicated Option set specifically to use for Reusable elements, such as example CRUD Popup, CRUD Floating, Settings, and User Access Management.

Using the 🧭 Element Display option follows the same logic as using 🧭 Navigation to navigate the pages. By default, the groups we want to navigate between are hidden.

🧭 Element Display option set has only two fields: display and text. The 'text' field is used in an action that gets triggered on page load (see explanation below).

For example, in the 👥 USER ACCESS MANAGEMENT reusable, the login section is visible by default. Adding the 'type=signup' parameter in the URL structure will change the section to the one that text matches the option set, in the case of 'signup' value it is going to be a signup section. You can see above that Option set 'Access - Signup' have 'signup' as 'text' field value.

👥 USER ACCESS MANAGEMENT reusable comes with a pre-build 'page is loaded' workflow. It triggers a custom event which then changes the section depending on if the URL key 'type' is not empty and there is an Option set that matches the 'text' field value.

Keep in mind that like with 🧭 Navigation logic, this action picks the first item from the list. If you have more than one Option having the same 'text' field value it will pick the first one on the list. If you find that limiting you can always add an additional attribute e.g. page and add it as an additional filter so you can use multiple Option using the same value.

We set that state on the top parent element. In our example its 👥 USER ACCESS MANAGEMENT. Here you can also set which section should be visible by default by changing the 'Default value' field.

The sections follow the basic conditional logic of being shown/ hidden depending the on the state of the Reusable.

Additionally, the 👥 USER ACCESS MANAGEMENT contains the 💡 CHANGE SECTION custom event which you pick the section you want to navigate to within that element