How can I make both the category and subcategory links have an active status on the catalog page in Webflow's CMS collections?
- Create Category and Subcategory CMS Collections with reference fields and structure the catalog under Subcategory Template pages.
- Use nested Collection Lists with filtering to display Categories and their Subcategories, then apply Conditional Visibility and styling to simulate active states for Categories and use Webflow’s native “Current” class for Subcategories.
To show active states for both a category and its subcategory on a catalog page in Webflow, you'll need to use conditional visibility and a bit of CMS-aware structure. Webflow only allows one native "current" state on CMS Collection pages, so creating a manual system is necessary.
1. Structure Your Collection Pages
- Ensure you have two CMS Collections: one for Categories and one for Subcategories, where Subcategories reference (link to) Categories via a Reference field.
- Create a Catalog CMS Template page (e.g., Subcategory page) that each individual product or listing appears under.
2. Display the Navigation Structure
- Add a Collection List for Categories.
- Inside each Category item, nest another Collection List for its related Subcategories. Use filtering: Where Subcategory’s Category = Current Category.
3. Manually Create Active States
Because Webflow can only set the current class based on the URL of the CMS Template Page, you need to manually simulate it for nested navigation.
- Use a Text element or Link Block for each Category and Subcategory.
- Add a Conditional visibility setting:
- For Categories: Add a condition like “If Current Subcategory’s Parent Category equals this Category”.
- For Subcategories: Use Webflow’s native
Currentclass on links if the page URL matches the Subcategory link.
4. Add Custom Styling for Active States
- Use a combo class or
Conditional visibilityto reveal an alternate visual element (e.g., underline or background color) for a link considered “active”. - Example: If the condition is met, show a
divwith special styling or change the formatting inside the link block to indicate it’s active.
5. Link Targeting
- Use Link Blocks or Text Links using the
Currentclass for Subcategory links. - For Category links, since they don’t have a dedicated collection page in this setup, simulate activeness with visibility and styling as described above.
Summary
To make both category and subcategory links appear active on a Webflow CMS catalog page, simulate the active state by using Conditional Visibility based on relationships between Subcategory and Category collections. Use Webflow’s native “Current” class for subcategories and manual styling rules for categories via CMS logic.