Best way to configure the navigation

CrypTechy · 2024-12-20T20:41:28.512Z

Hi there!

When users connect to my web app, they end up in their user space that has a sidebar on the left with some menu items like “Dashboard” and “Portfolio”. The latter has a sub menu listing other items (Item A, Item B).

Currently, I’ve built different pages: a page for “Dashboard” and a page for “Portfolio”. Each items (Item A, Item B) in “Portfolio” has its own page as well. When users click on these menu items, a workflow brings them to the corresponding page. Ultimately, the only thing that changes between pages is the content beside the sidebar, the latter being on every page.

I was wondering if that’s the best way to configure the navigation… Maybe using custom states with groups showing and hiding as the user clicks on the menu items of the sidebar would be a better idea? I don’t know which system is the best/most efficient/most scalable.

Currently my sidebar is a reusable element that is placed on every page. However, if we use custom states with groups showing/hiding on the right side of the sidebar, then I would only need one page, and the sidebar does not need to be a reusable element. What do you think?

boston85719 · 2024-12-21T07:52:29.602Z

CrypTechy:

I was wondering if that’s the best way to configure the navigation… Maybe using custom states with groups showing and hiding as the user clicks on the menu items of the sidebar would be a better idea? I don’t know which system is the best/most efficient/most scalable.

No to custom states as they do not provide potential functionality to have shareable links…use URL parameters or URL paths instead

CrypTechy · 2024-12-21T20:47:00.378Z

I’m not familiar with URL parameters and paths yet but I’ll have a look. As I understand, I should rather stick to pages?

bubblewithsandip · 2024-12-22T05:41:40.179Z

We have a concept of SPA(Single Page Application) in web development. If you use separate pages for each dashboard section then switching between these pages take some time ie. to fetch data, render the whole page etc which is often not a good User Experience(UX).

Instead you can use SPA here by dynamically hiding and showing group when we switch section. So contents for each section will exists in the same route ie. /dashboard but the content dynamically change, because this will not refresh the whole page it will lead to better user experience.

One issue with SPA is the URL is same for both section i.e /dashboard. To solve this we can add the currently selected section in URL params like for dashboard page URL will be /dashboard?tab=dashboard and for portfolio page URL will be /dashboard?tab=portfolio. To do this in bubble, you need to do “Go to page” action and in parameter you need to pass tab as a key and portfolio or dashboard as a value. Then in dashboard section you can add a condition - get data form Page then check what is the value for tab if it is dashboard then show the group. Same for portfolio div.

boston85719 · 2024-12-22T06:14:12.196Z

To learn about url parameters or paths you can search forum with keywords and should find a lot. If you include an @ and my handle you’ll find enough to have a solid understanding of how they work. Google or ChatGPT likely could spell out the general concepts well, then bubble manual to understand how to work with them in bubble.

CrypTechy · 2024-12-22T11:37:59.184Z

That’s crystal clear, thanks a lot!

petter · 2024-12-22T13:25:30.068Z

This article in the manual explains URL parameters.

I also have two articles on my website that may be helpful:

Custom States or URL Parameters - this article compares the pros and cons of each method
URL parameters – this article explains URL parameters in general

system · 2025-02-28T20:41:36.826Z

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