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
- Use the URL pattern
/collection-name/category-slug(e.g.,/categories/caps) to manually link to category pages. - Add static links in the navbar using full paths or dynamic breadcrumb links via CMS references to category slugs.
To link to specific Collection category pages (like "All Caps" or "All Hoodies") in your Webflow site’s navigation or breadcrumbs, you need to use the correct URL structure for Collection Pages and manually link to these pages using static or dynamic links.
1. Understand Your Collection Page URLs
- Webflow automatically creates dynamic URLs for Collection Pages, typically following this format:
/collection-name/item-slug
Example: If you have a Collection named "Categories" and an item with the slug "caps", the URL will be/categories/caps. - You can control the slug of each category item inside the CMS.
2. Add Static Links to the Navigation Bar
- Go to the Navbar component in your project.
- Select a Link Block or Text Link where you want to add the category.
- Change the Link setting to “Page” or “URL”:
- If the target category is in a Collection Page, choose External URL and input the full path (e.g.,
/categories/caps). - Repeat this for each category (e.g.,
/categories/hoodies,/categories/t-shirts).
3. Create a Dynamic Breadcrumb Component (Optional)
If you’re building breadcrumbs using Webflow CMS:
- Add a Text Block or Link Block inside a Collection Page (e.g., Product Page).
- Use a Collection Reference or Multi-Reference field that links the product to its category.
- Use a Text Link and set it to pull the category name dynamically.
- Set the link URL to be:
/categories/+Current Category Slug, using the "Get text from" option and selecting the referenced field's slug.
4. Ensure Correct Slug Usage
- Go to your CMS > Categories Collection.
- Check that each item has a clean, URL-safe slug (e.g., caps, hoodies).
- Update slugs if needed to match your desired URL paths.
Summary
To link to specific category pages like "All Caps" or "All Hoodies," use the URL pattern /collection-name/category-slug in your navbar and breadcrumb links. Add these either as static links in your navigation or as dynamic links via CMS references in breadcrumbs.