Having a clear navigation on your website is very important, so you can find what you are searching quickly without having to look around. But occasionally even the most structured menu can't provide clear enough information about where you are and how to get back to where you were.
A breadcrumb trail is an effective way to show clearly where you are and how to get back to the page or front quickly. A breadcrumb trail is simply a series of links that appear directly above the contents of the page.
If you think a breadcrumb trail with only text links is boring, you can style it with a slightly nicer design if you wish.
Making a breadcrumb trail in Webflow is quite simple:
- Create a collection and call it e.g. Product category ( = main category)
- Create a collection and call it product group (= subcategory)
- Connect these two together by entering referencefields.
- Add 1 and 2 as reference fields in the product category
On the product page:
- Enter a flexbox container with 4 links in succession. Give each link a 1 em padding on the right side.
- Set the first one to the front
- Set the other to "current product" – and select the "Product category" field
- Set the third to "current produc"t and select the field "Product group"
- Set the fourth to "current product" and select "name"
On the Product Group page:
- As section 1 above
- As section 2 above
- Set this to "link to page" "product category" and select product category "name"
- Set this to "link to page" "current product group" and select "name"
On the Product kateori page:
- As section 1 above
- As section 2 above
- Set this to "link to page" "current product category" and select "name"
If you would like a little more information please see a tutorial here:
how-to-build-breadcrumb-navigation-for-webflow
Or video here:
https://www.youtube.com/watch?v=mFF5jaGGqfA&feature=youtu.be