How to build dynamic breadcrumbs in Bubble

The simplest way to build dynamic breadcrumbs in Bubble is to store the “path” in URL parameters or as a custom state, then generate the breadcrumb UI by repeating over that list. Each breadcrumb item links back by rebuilding the URL parameters up to that level. This keeps everything dynamic, works on any page type, and requires no plugins.

Create the breadcrumb list

You need a list that represents the user’s current navigation path, for example: Home → Category → Product. In Bubble the most common way is:

• Use a text list in URL parameters (example: ?trail=Home,Category,Product). This survives page reloads and allows sharing links.
• Or use a custom state (list of text) if breadcrumbs don’t need to persist across reloads.

Display breadcrumbs with a Repeating Group

Place a small horizontal Repeating Group and set its data source to the list you created. Each cell shows one breadcrumb “segment” (a text). Add a clickable element inside the cell to let the user jump back.

Make breadcrumbs clickable

When a user clicks a breadcrumb item, you rebuild the URL parameter containing the breadcrumb list only up to that item. This reproduces traditional breadcrumb behavior.

// Example action inside the cell:
// “Go to page” → current page → send URL parameter “trail”

trail = RG Breadcrumbs's List of Text :items until # Current cell's index

How to keep the list updated

• If you navigate to a deeper level, run “Go to page” and send trail = existing trail :plus item NewName.
• If you start from the top (like Home), reset the trail to a single-item list.
• On page load, set a custom state to the value of the URL parameter so elements can reference it easily.

Why this works well in Bubble

Bubble does not track page hierarchy automatically, so you must define the breadcrumb path manually. URL parameters are ideal because they keep the breadcrumb dynamic, stable across refreshes, and easy to manipulate with native Bubble operators like :plus item and :items until #. This method is production‑safe and used in real apps with deep navigation.