Better Breadcrumbs with Webflow Components

In my video 2 months ago I missed an opportunity to simplify my breadcrumb links workflow by using Webflow components. In this video I'll show you how I would design a breadcrumbs component for a Webflow site that has SEO and link structure at top of mind.
// CLONE IT (affiliate link)
👯‍♂️ try.webflow.co...
// FREE resources
✂️ Code Snippet Library: code-snippets-...
🤝 CSS Nobody Told You About: www.webbae.net...
🚗 Roadmap to learn Webflow: www.webbae.net...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativeco...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae

[@crooker2]

I love being validated. I built my breadcrumb component EXACTLY like this before I ever saw this video. Thank you!

[@webbae]

Good morning 👑 🤝

[@erikswanson3441]

ho do you have "content," page and then also, "content," folder? would the content folder be the page?

[@webbae]

nope! content folder just creates the route not the page.

[@shivamyadav-bp6zg]

Hey I created the same way but my blog home page is getting redirected s /blog/blog

[@webbae]

maybe remove the /blog from one of the links? The paths are relative so that might do it!

[@addy1909]

Thank you for this video. I’ve got a question: does this method work on static pages? Because I’ve found lots of breadcrumbs tutorials for CMS collections and Ecommerce, and none of them mentions the case when all of the pages are static 🥲

[@webbae]

I'm using CMS in this example. You could do it for static pages but it would require some manual labor, or Javascript :).

[@addy1909]

Thanks for answer @@webbae

[@Reapertips]

so soo goood! Thank you for this ✨
Would love to see your approach on adding and styling an audio player in webflow

[@Sergy_Kondrashin]

Thank you 🙏🏻
What do you think about this method: ruclips.net/video/mFF5jaGGqfA/видео.html - via reference links inside cms collection

[@webbae]

I love this example by Matt. It's from before we could nest collection template pages inside folders so you'll notice a "flatter" URL structure such that the URL pattern doesn't match the breadcrumb pattern. Unfortunately I couldn't get it to work with the nested example since a category CMS like "media-types" will have it's own URL even if we nest it within content. You could set up the link in the CMS but then you lose the benefit of matching routes in staging + production.
I've seen the flat URL structure work just fine for SEO in client projects, so I can happily recommend Matt's solution if your CMS structure supports (it's the best setup for ecom for sure). I have some clients with strict URL structure requirements though in which case I'm using this setup.
Maybe I'm missing something? A nifty trick? If you discover anything else let me know and thanks for sharing!

[@Sergy_Kondrashin]

Thank you for explanation 🙌🏻🙌🏻🙌🏻 Great tuts you do) You are Legend!))) Learn a ton from you!

[@surendarr2177]

Thank you So much for this tutorial

[@webbae]

Glad it was helpful!

[@heatherliu6856]

Breadcrumbs = 👍, Cookies = 👎

[@webbae]

never would think I would hear you say this. Confusers are confusing.

[@heatherliu6856]

Contusors are contusin 😔

[@digitalshane_]

This content is GOLD! 🙌

[@webbae]

glad it helped! Good way to flex those component muscles too :).

[@joaomacaumaia3834]

thanks!!!

[@enterprising9]

Everything you post is so helpful. Yeeeeeee 🔥 🤙🏽

[@webbae]

Glad to hear it!! Feel free to suggest other topics 💯