How can I make both the category and subcategory links have an active status on the catalog page in Webflow's CMS collections?

To show active states for both category and subcategory links on a catalog page in Webflow using CMS collections, you need a combination of custom classes and conditional visibility based on the current page or URL structure.

​

1. Structure Your CMS Relationships

​

• Make sure your subcategory collection has a reference field linking to the category it belongs to.
• Your catalog page should utilize either a combined category > subcategory > product structure using nested CMS Collection Lists or Reference fields.

​

2. Set Up Category and Subcategory Links

​

• Use Collection Lists to generate both category and subcategory links.
• For the subcategory list, nest it inside the category item so you retain relational context. Alternatively, use a Filter on the subcategory list to only show subcategories related to the current category.

​

3. Highlight Active Category

​

• Select the category link (within your Collection List).
• Use the Current class state in Webflow. This class is automatically applied to links that lead to the current CMS template page (e.g., you're on a category template page).
• Style the Current state to indicate it's active (e.g., bold text, colored underline).

​

4. Highlight Active Subcategory

​

• Webflow only auto-applies the Current state to one link per page. To also highlight a subcategory:
• Use a custom class on subcategory links (e.g., “subcategory-link”).
• Add a Conditional Visibility rule to detect when the subcategory slug matches the current page slug, if you're on a subcategory template page.
  • Add a Text Block or Link Block inside the subcategory item.
  • Use Conditional Visibility: “Subcategory Slug is equal to Current Page Slug”.
  • Inside that visible block, display the subcategory link with an "active" style.

​

5. Optional: Use Custom JavaScript (if needed)

​

• If Conditional Visibility alone isn't sufficient (e.g., on a dynamic All Products page), you could use JavaScript to add an "active" class by comparing the current URL path to link hrefs.
• Example use case: Highlight both category and subcategory when viewing products under a subcategory but not on a template page.

​

Summary

​

To activate both category and subcategory link styles on catalog pages in Webflow:

​

• Use CMS reference fields to maintain relationships.
• Apply the Current state class to category links via Webflow’s automatic detection.
• Use Conditional Visibility on subcategory links to simulate an active state.
• If needed, use custom JavaScript to highlight links dynamically based on the current URL.

​

This approach works within Webflow's CMS and design limitations while maintaining clarity for users navigating your catalog structure.