Webflow Breadcrumbs | CMS Issues

I’m working on a building a breadcrumb solution for my client and I’m running into a bit of an issue when it comes to my L1 –> L2 –> L3 collections. See the below.

CMS Reference:
Home > “Main Product Category (L1)s” > “Product Categories (L2)” > “Products (L3)”

  • They should all be linked back to the original page
  • Reference it’s previous higher level category name / collection item

CMS Structure Below:
Home > {L1 Product Category / CMS Item: “Playground”} > {L2 Sub-Product Category / CMS Item: “Steel & Traditional Playgrounds”} > {L3 Product Name / CMS Item: “Exploration Station”}

Desired Breadcrumb Results:
Example: Home > Playground > Steel & Traditional Playgrounds > Exploration Station

Here is a read only link. Let me know if this is something we can handle.

Thanks :folded_hands:t5:

Hi Matt,

If this is your structure

Home > Main Category > Category > Product 

And your CMS is structured as-

  • Product as a single-ref to Category
  • Category has a single-ref to Main Category

Then on your Product collection page, you can construct 3 levels without JS using a bit of a hack;

In short Webflow has a one-hop rule in how it follow references, so you can easily get the Category info from the Product through the single-ref, but to get the Main Category, you have to filter a collection list to that same Category.

Slug is not available in the filter list, which means your Category names must be unique for this to work correctly.

Below the screenshot is a readonly link so you can look at the collection list settings