# How to Set Up Dynamic Breadcrumbs in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Dynamic breadcrumbs in Bubble are built by reading the page hierarchy from URL parameters or data relationships and displaying a clickable trail. You create a reusable breadcrumb element that generates links like Home → Category → Subcategory → Item based on the current page context. Each breadcrumb segment links back to its parent page. This improves navigation and helps with SEO.

## Overview: Dynamic Breadcrumbs in Bubble

This tutorial shows how to create automatic breadcrumb navigation that reflects the user's position in your app's hierarchy. You will build a reusable breadcrumb element that works across pages.

## Before you start

- A Bubble app with a multi-level page hierarchy (e.g., categories → products)
- Understanding of reusable elements and URL parameters
- Data Types with parent-child relationships

## Step-by-step guide

### 1. Define your page hierarchy

Map out your app's navigation hierarchy. For example: Home → Categories → Category Detail → Product Detail. Identify how each level connects — Category has a parent (home), Product has a parent category. Ensure your Data Types support this: Product has a 'category' field, Category may have a 'parent_category' field for subcategories.

**Expected result:** A clear hierarchy map showing how pages relate and which data fields connect them.

### 2. Create a reusable breadcrumb element

In the Design tab, create a new Reusable Element called 'breadcrumbs'. Set its type to empty (no content type). Inside, add a Row-layout Group. Add Text elements for each breadcrumb level separated by ' > ' or ' / ' dividers. Use conditional visibility to show/hide levels based on which page properties are available. For example: 'Home' is always visible, 'Category' is visible when a category property is set.

**Expected result:** A reusable breadcrumb element with conditionally visible levels separated by dividers.

### 3. Pass hierarchy data via reusable element properties

On the reusable element, define custom properties: 'category_name' (text), 'category_slug' (text), 'product_name' (text), 'page_title' (text). On each page where you place the breadcrumb, set these properties from the page's data. On a product page: category_name = Current page's Product's category's name, product_name = Current page's Product's name. The breadcrumb element uses these properties to display the trail.

> Pro tip: Use slugs for breadcrumb links instead of unique IDs for cleaner, more SEO-friendly URLs.

**Expected result:** Each page passes its hierarchy data to the breadcrumb element through custom properties.

### 4. Make breadcrumb segments clickable

Wrap each breadcrumb text in a Link element or make it a link-styled text. Set the destination: 'Home' links to the index page, 'Category' links to the category page with the category slug as parameter, etc. The last segment (current page) should not be a link — display it as plain text or in a different style to indicate the current location. Use conditional formatting: bold for the current page, normal weight with underline for clickable parents.

**Expected result:** Breadcrumb segments are clickable links that navigate to parent pages, with the current page shown as non-linked text.

### 5. Handle edge cases and deep hierarchies

For pages with subcategories (3+ levels), use a recursive approach: if Category has a parent_category, show parent first. Build the trail by walking up the parent chain. For pages without a clear hierarchy (settings, profile), show a simple 'Home > [Page Name]' breadcrumb. Add a fallback that always shows at least 'Home' as the first element. Test with different entry points to ensure breadcrumbs are accurate regardless of how users arrive at a page.

**Expected result:** Breadcrumbs work correctly for all page depths and edge cases, always starting with Home.

## Complete code example

File: `Workflow summary`

```text
DYNAMIC BREADCRUMBS — SUMMARY
================================

REUSABLE ELEMENT: breadcrumbs
  Properties:
    category_name (text), category_slug (text)
    subcategory_name (text), subcategory_slug (text)
    product_name (text), page_title (text)

  Layout: Row Group
    [Home] > [Category] > [Subcategory] > [Current Page]

  Conditionals:
    Category visible: when category_name is not empty
    Subcategory visible: when subcategory_name is not empty
    Current page: always visible, not a link

PER-PAGE SETUP:
  Index: breadcrumbs (page_title = 'Home')
  Category: breadcrumbs (
    category_name = Current page's Category's name
  )
  Product: breadcrumbs (
    category_name = Product's category's name
    category_slug = Product's category's slug
    product_name = Product's name
  )

LINKS:
  Home → /index
  Category → /category/[slug]
  Current page → not linked (bold text)

SEO: Add JSON-LD breadcrumb schema in page header
```

## Common mistakes

- **Making the current page a clickable link in the breadcrumb** — Clicking the current page breadcrumb reloads the same page, which is confusing and serves no navigation purpose Fix: Display the last breadcrumb segment as plain, non-linked text in a different style (bold or darker color)
- **Hardcoding breadcrumb text instead of using dynamic data** — Hardcoded text does not update when category or product names change, showing stale navigation Fix: Always source breadcrumb text from dynamic data (Current page's data or reusable element properties)
- **Not including breadcrumbs on all pages** — Inconsistent breadcrumb presence confuses users about where they are in the app hierarchy Fix: Add the reusable breadcrumb element to every page with appropriate properties set for each context

## Best practices

- Use a reusable element for breadcrumbs to maintain consistency across pages
- Make all segments except the current page clickable links
- Use slug-based URLs for clean, SEO-friendly breadcrumb links
- Show the current page as bold, non-linked text
- Always start with 'Home' as the first breadcrumb segment
- Add JSON-LD structured data for breadcrumbs to improve SEO
- Keep breadcrumbs on one line — truncate with ellipsis on mobile if needed

## Frequently asked questions

### Do breadcrumbs help with SEO in Bubble?

Yes. Breadcrumbs help search engines understand site hierarchy. Add JSON-LD structured data in the page header (Settings → SEO) for search engines to display breadcrumb trails in results.

### How do I handle breadcrumbs on a single-page app?

If your app uses groups with conditional visibility instead of separate pages, track the navigation path in a custom state list and generate breadcrumbs from that list.

### Can I show more than 3 levels of breadcrumbs?

Yes. Add more conditional segments to the reusable element. For very deep hierarchies, consider truncating middle levels with '...' to save space.

### Should I use ' > ' or ' / ' as the breadcrumb separator?

The '>' arrow is more common and indicates hierarchy direction. Use ' / ' for a cleaner look. Both work — pick one and stay consistent.

### Can RapidDev help implement navigation and SEO features in Bubble?

Yes. RapidDev can build complete navigation systems including breadcrumbs, mega menus, dynamic sitemaps, and SEO optimization for your Bubble app.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-dynamic-breadcrumbs-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-dynamic-breadcrumbs-in-bubble