How can I link to specific category pages like "all caps" or "all hoddies" from the navigation and breadcrumbs in my Webflow site?
TL;DR
- Create a CMS Categories collection with template pages at /categories/[slug] and design them as needed.
- In navigation and breadcrumbs, use static links like /categories/caps or bind dynamic links using collection lists and the category slug field.
- On product pages, use reference fields to link back to the related category page dynamically.
To link to specific category pages like "All Caps" or "All Hoodies" in Webflow, you need to ensure your CMS category template pages are accessible and that your navigation and breadcrumb elements point to them correctly.
1. Enable and Structure Your CMS Category Collection
- Go to CMS → Collections, and make sure you have a Categories collection (e.g., with items like "Caps," "Hoodies").
- Each category should have its own template page at
/categories/category-name(e.g.,/categories/caps). - This page is automatically generated, but you can design it in the Category Template Page Designer.
2. Link to a Specific Category Page in Your Navigation
- Open your Navigation menu in the Webflow Designer.
- Add a Link Block or Text Link to the nav.
- For the link's URL, enter the static path for the category, e.g., /categories/caps or /categories/hoodies.
- Alternatively, if you're dynamically populating nav items from CMS, use a Collection List pulled from your Categories collection and bind the link to the Current Category's slug (e.g.,
/categories/[Slug]).
3. Create Dynamic Breadcrumbs With Category Links
- If your Products belong to Categories (via a Reference or Multi-reference field), you can pull in category data onto the product template page.
- On the Product Template Page, use the Multi-reference field to insert a Link Block or Text Link.
- Set the link to point to the Current Category’s page.
- This will function as a breadcrumb link like: Home → Caps → Product Name.
- To add a static "Home" or "All Products" link, use additional static text links.
4. Avoid Hardcoding If Using Dynamic CMS
- If you're updating categories often, avoid manually typing paths.
- Use a Collection List fetched from the Categories collection, and bind link paths using Current Category Slug (e.g.,
/categories/[Slug]).
Summary
To link to “All Caps” or “All Hoodies,” use /categories/[slug] as the URL in nav and breadcrumb links. Use Collection Lists or Reference fields for dynamic linking, and structure your Category template pages to display the right filtered content.