Having a clear navigation on your website is very important, so you can find what you are looking for quickly without having to look around. But sometimes even the most structured menu can't provide clear enough information about where you are and how to get to where you were.
A breadcrumb trail is an effective way to show clearly where one is and how to quickly return to the page one was on or the front page. A breadcrumb trail is simply a series of links that appear just above the content of the page.
If you find a breadcrumb path with only text links boring, you can style it with a slightly prettier design if you wish.
Creating a breadcrumb path in Webflow, is quite simple:
- Create a collection and call it e.g. Product Category (= main category)
- Create a collection and call it e.g. 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:
- Post a flexbox container with 4 links in succession. Give each link a 1 em padding on the right side.
- Put the first one to the front
- Set the second 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 paragraph 1 above
- As paragraph 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 paragraph 1 above
- As paragraph 2 above
- Set this to “link to page” “current product category” and select “name”
If you want some more information, you can see a tutorial here:
how-to-build-breadcrumb-navigation-for-webflow
Or video here:
https://www.youtube.com/watch?v=mFF5jaGGqfA&feature=youtu.be