How can I implement breadcrumbs on my Webflow website with folders to show the correct parent folder hierarchy in the breadcrumb navigation instead of just the immediate parent page?

To implement breadcrumb navigation in Webflow that reflects the correct folder-based hierarchy (not just parent pages), you’ll need to manually build a dynamic approach using Static, CMS, and custom structure awareness.

​

1. Understand Webflow URL Structure with Folders

​

• Webflow uses folders to define hierarchy in URLs, e.g., a page at /services/design/logo means:
• Folder: /services/
• Sub-folder: /services/design/
• Page: logo

​

• Webflow doesn’t natively expose this folder path for dynamic use, so breadcrumbs must be manually built or faked using the CMS structure.

​

2. Use CMS Collections that Reflect Hierarchy (If Applicable)

​

• If your site’s pages are powered by CMS (e.g., Blog, Services), use Reference or Multi-reference fields to indicate parent relationships.
• For example:
• Create a Collection called Services.
• Inside each item, use a Reference Field called Parent Category to link to another service item which acts as the parent.

​

• In your Collection Template Page:
• Add breadcrumb links using the fields—first link as Home, second as Parent Category (if present), third as Current Item.

​

3. For Static Pages in Folders, Use Manual Breadcrumbs

​

• Webflow doesn’t auto-generate breadcrumbs based on folder paths.
• You need to manually add breadcrumbs to each page based on its path.

​

Example for /services/design/logo:

​

• Add a Breadcrumb Wrapper with individual Text Links:
• Link 1: Home → /
• Link 2: Services → /services/
• Link 3: Design → /services/design/
• Current Text (not linked): Logo

​

• Use a consistent Symbol for the breadcrumb component, but override links/text with page-specific values when used on each page.

​

4. Optional: Use JavaScript for Auto-Breadcrumbs (Advanced)

​

• If your URLs follow reliable folder patterns, you can insert a Custom Code block in your footer to:
• Read window.location.pathname
• Split the path by /
• Dynamically generate breadcrumb links

​

• This method requires site-wide consistency and styling setup for the breadcrumb markup.

​

5. Style and Reuse with Symbols

​

• Convert the breadcrumb wrapper into a Component or Symbol.
• Use text overrides to adjust each level depending on placement.
• This ensures consistent styling and reduces manual duplication.

​

Summary

​

To show the correct folder-based navigation in breadcrumbs, use manual static breadcrumbs for foldered static pages and Reference fields for hierarchical CMS collections. For dynamic automation, JavaScript parsing of the URL is needed but not natively supported by Webflow.