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.
Prerequisites
- 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
Define your page hierarchy
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.
Create a reusable breadcrumb element
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.
Pass hierarchy data via reusable element properties
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.
Make breadcrumb segments clickable
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.
Handle edge cases and deep hierarchies
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 working example
1DYNAMIC BREADCRUMBS — SUMMARY2================================34REUSABLE ELEMENT: breadcrumbs5 Properties:6 category_name (text), category_slug (text)7 subcategory_name (text), subcategory_slug (text)8 product_name (text), page_title (text)910 Layout: Row Group11 [Home] > [Category] > [Subcategory] > [Current Page]1213 Conditionals:14 Category visible: when category_name is not empty15 Subcategory visible: when subcategory_name is not empty16 Current page: always visible, not a link1718PER-PAGE SETUP:19 Index: breadcrumbs (page_title = 'Home')20 Category: breadcrumbs (21 category_name = Current page's Category's name22 )23 Product: breadcrumbs (24 category_name = Product's category's name25 category_slug = Product's category's slug26 product_name = Product's name27 )2829LINKS:30 Home → /index31 Category → /category/[slug]32 Current page → not linked (bold text)3334SEO: Add JSON-LD breadcrumb schema in page headerCommon mistakes when setting up Dynamic Breadcrumbs in Bubble
Why it's a problem: Making the current page a clickable link in the breadcrumb
How to avoid: Display the last breadcrumb segment as plain, non-linked text in a different style (bold or darker color)
Why it's a problem: Hardcoding breadcrumb text instead of using dynamic data
How to avoid: Always source breadcrumb text from dynamic data (Current page's data or reusable element properties)
Why it's a problem: Not including breadcrumbs on all pages
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add dynamic breadcrumb navigation to my Bubble.io e-commerce app. The hierarchy is Home > Category > Product. How do I build a reusable breadcrumb component that updates based on the current page?
Create a reusable breadcrumb element for my app. It should show Home > Category > Product on product pages and Home > Category on category pages. Each segment should be a clickable link except the current page. Pass data via reusable element properties.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation