Dynamic Breadcrumb Links

Hi everyone

I’m new to Webflow so I’m learning as I go along. I’m currently reproducing my current site in Webflow and am doing well with the exception that I can’t seem to work out how to create a simple ‘DYNAMIC’ breadcrumb navigation like which can be seen on my current sites pages (the one I’m currently trying to reproduce in Webflow), an example would be Name, Logo, Concept Testing | SAME-DAY RESULTS | 19/07/2021 (see 3rd section in lime green).

I’ve searched the web and can only ever see a tutorial in relation to e-commerce breadcrumbs which I don’t think is directly applicable… unless I’m getting the wrong end of the stick with that :wink:

Basically, all I need it to do is have 3 ‘dynamic’ breadcrumb links, the 1st will always be ‘Home’, the second will the 2nd level deep/sub-navigation e.g. ‘Services’ or ‘Blog’ etc, with the final breadcrumb being the 3rd level deep/ the link to the actual current page that the user is on.

Any advice would be greatly appreciated as it’s my only stumbling block.

Thank you

Stephen (UK)


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Stephen - I use the technique below (this is assuming all your pages are all in Collection Lists):

Step 1. Create a Collection List as needed, for example ‘Stuff.’ Add all pages that will feature in this section (eg. Parent and Child pages).
Step 2. Add a dropdown to the Collection Settings: Is this page a Parent or Child page? With options being either Parent or Child.
Step 3. Add a multi-reference field, referencing the collection itself (in this case ‘Stuff’). The Label can read: If Child is selected above, please choose Parent.
Step 4. Create a new static page, for example ‘Stuff Section.’ This page can be used as a landing page for the section, and include links to the Parent pages (as tiles for example). Add the ‘Stuff’ Collection List to this page and use Conditional Visibility to show only the Parent pages.
Step 5. On the Collection Page add breadcrumb links (eg. Home > Stuff Section > Parent > Child). Adjust Conditional Visibility as needed, eg. The Child link is only visible if ‘Step 2’ equals Child.

Hope this helps!

2 Likes

Thanks so much for this Craig.