Request for Advice on Breadcrumb Navigation Setup

Xtine · 2024-07-27T19:47:41.584Z

Hi,
What are your best tips for setting up breadcrumb navigation? I’m looking for something that can be based on my URL parameters.
Something like this:

Skjermbilde 2024-07-27 kl. 21.48.021100×218 42.4 KB

And is it possible to build as an reusable element?

Xtine

Zeroic · 2024-07-27T20:16:34.615Z

Hi! I haven’t done this at scale in the past so might not be the best person to answer this xD - but I believe that using the path segments would be cool to achieve something like this.

Basically, you can extract the path segments as a list and display that in a RepeatingGroup. Clicking on any text in the RepeatingGroup allows you to navigate to that page (with the current cell’s, and its preceeding texts as path segments).

Nevertheless, following this thread since there could be an interesting discussion here

Xtine · 2024-07-27T20:53:21.020Z

I tried to add a link element and its showing the page URL by using Get v from page URL. But I can’t choose an dynamic destination page or change the text to e.g my Options Sets tabs name…

Anyone?

boston85719 · 2024-07-28T05:07:02.915Z

Xtine:

And is it possible to build as an reusable element?

yes possible. I first did this years ago, but bubble has since made it easier with new features.

Now I use the navigation go to page with the data to send as text with the path list necessary, but using path list instead of parameters is more challenging.

Simply extract URL change from parameter to path list, then use operator contains and match against the options…honestly I could tell you five or six different ways but each depends on your set up and what other things are done on the page, since content type on a page makes it not possible to send data as a text, while needing SEO on the page makes using URL parameters a no go.

Xtine · 2024-07-28T09:36:46.105Z

Thank you for the response @boston85719 . SEO is not necessary to consider. I have 8-9 pages (these are not set up with URL parameters). The content on these pages has been implemented with URL parameters.

If I understand you correctly, I need to add URL parameters to these pages, so that, for example, /settings becomes /settings?v=settings, and then add the already existing parameters?

Today, it looks like this: /settings?v=myprofile

boston85719 · 2024-07-28T12:18:00.639Z

No, you do not need to add parameters with your situation.

You should use URL path list. When using navigation go to page, your data to send would be arbitrary text which will be the path list as it needs to be based on user click of breadcrumb.

Thing about path list is it’s a list, so can have more than one item, such as .com/stores/massachusetts/boston

The above, page name is stores and is item #1 of path list, Massachusetts is item #2 of path list and Boston is item #3

When you use data to send you don’t include page name, only path items after so items from #2. You do not need a / in front of item#2 but do need the / between every path list item after item #2.

When you want to show the breadcrumbs on screen just use get data from url and select path list. This is data source for an RG of type text.

Xtine · 2024-07-28T14:36:05.332Z

Thanks! I made something. Is it possible to let the user see another text than the exact url-parameter?

e.g: My slug (url parameter) is volume-form (I´m using options sets to set the v.)

But I want to show the Actual Name for the option I got the slug from. In this case: “Volume”

Skjermbilde 2024-07-28 kl. 16.34.59

boston85719 · 2024-07-28T16:09:07.291Z

sure, just reference whatever attribute you want to display to the user. It is a bit of pain to do so if it is not necessary to obfuscate to the user the actual name for the option, but if you already have things setup to use an attribute for your URL then keep it that way and just remember every time you work with the option set you need to in the dynamic expression select the attribute and not the display value.

system · 2024-10-05T19:48:30.517Z

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