How to Make a Dynamic Breadcrumb Navigation

So this is not really possible without code as of now, but here is how I was able to make a dynamic breadcrumb navigation.

First, the problems I encountered with trying to do it without code and using Bubble elements.

  1. Bubble’s Text element Rich Text Editor Insert Link still does not provide for dynamic URLs

If it did, this would be much more simple and could be completed without code in a No-Code environment. @Bubble please consider this, I believe I posted an Idea on the forum in the past for this feature to be added.

  1. If you want to use this Link feature and manually enter in your link URL, it won’t be dynamic, but also the link that is generated opens the new link in a new window, so if you don’t want that; well, too bad you can’t change that.

  2. Using some code such as [link][/link] doesn’t, or at least I couldn’t find out how to change the tab the link is opened in, so it also opens in a new window or tab.

So, how did I achieve my goal?

  1. I needed to use an HTML element and some code

Screen Shot 2020-09-04 at 3.25.50 PM

This code will allow you to open the link in the same tab

There are drawbacks of the HTML element since you can not set the height to a low height without having a scrollbar added for some reason, so you are kind of stuck with a higher height…I’m not sure if there could be some styling added to the HTML element to fix that issue.

  1. To go further with the breadcrumb, need conditionals on the HTML element…I based mine off of the URL parameter in the URL

So with this I have been able to create a dynamic breadcrumb navigation…now I just need to style the HTML paragraph so the text fits my app style.

Really wish this could be obsolete and unnecessary if Bubble added the dynamic URL in the Rich Text Editor of the Text Element.

7 Likes

Awesome! Thanks for yet another helpful tip @boston85719 :ok_hand:

As an update to this I just figured out that it is possible to use a text element instead of an HTML element for this as you can change the target of the URL link in the text element to allow the page to open in the same tab

Screen Shot 2020-10-26 at 2.44.50 PM

6 Likes