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

To make both the category and subcategory links have an active status on the catalog page in Webflow's CMS collections, you can leverage a combination of dynamic class binding and conditional styling.

Here's a step-by-step guide on how to achieve this:

1. Set up your CMS collection structure: Make sure you have properly defined the fields for category and subcategory in your CMS collection.

2. Add a dynamic list to your catalog page: Insert a dynamic list element where you want to display the category and subcategory links. Bind the list to your CMS collection and set the filter to display the desired items.

3. Create a link for category and subcategory: Inside your dynamic list, add link elements for both category and subcategory fields. Use the link settings panel to bind the link to the respective CMS fields.

4. Set up custom classes for active status: In the Style Manager, create two custom classes for active status, e.g., "active-category" and "active-subcategory." Define the desired styling for these classes, such as changing the font color or background color.

5. Use conditional visibility for active status: Apply conditional visibility settings to each link element. For the category link, set the condition to display if the current category matches the CMS category value. Similarly, for the subcategory link, use a condition to check if the current subcategory matches the CMS subcategory value.

6. Apply dynamic class binding: Enable the "Add a class" option in the Style panel for both category and subcategory links. Use the dynamic class binding feature to bind the "active-category" or "active-subcategory" class based on the conditional visibility settings. This will dynamically apply the active status class to the appropriate link element.

By following these steps, you can ensure that both the category and subcategory links have an active status on the catalog page in Webflow's CMS collections. Based on the current item's category or subcategory, the corresponding link will have the active status class applied, allowing you to style it accordingly.