How can I create filter buttons on top of styled events in Webflow CMS?

To create filter buttons on top of your styled Events CMS collection in Webflow, you’ll need to use custom filtering with JavaScript since Webflow doesn’t offer native dynamic filter functionality. Here's how to set it up.

1. Set Up the CMS Structure

• Create a CMS Collection named “Events” with relevant fields (e.g., Event Name, Date, Category).
• For filtering, use a Category field (e.g., a plain-text or reference field).
• Add at least a few items per category to test filtering.

2. Add Filter Buttons Manually

• In your design, manually create filter buttons using Buttons or Div Blocks with text labels like All, Music, Sports, etc.
• Assign each button a custom attribute:
• Attribute Name: data-filter
• Attribute Value: the matching category name (e.g., music, sports)

3. Style the CMS Items

• Drag a Collection List onto your page and bind it to the “Events” CMS.
• Within each collection item, add a Wrapper Div and give it a class (e.g., .event-item).
• Add a custom attribute for filtering:
• Attribute Name: data-category
• Attribute Value: pull from the Category field via Custom Attributes (click cog icon > Add Field > category slug or name).

4. Add Custom JavaScript for Filtering

• Go to Page Settings and paste this inside the Before tag field:

  ``

• Ensure all filter button values (e.g., music, sports) exactly match the data-category values set on the CMS items.

• Use ‘all’ as the data-filter value for the button that should reveal all events.

5. Optional: Active Button Styling

• Add an active class toggle using JavaScript to show which filter is selected.
• Or, use Webflow Interactions to highlight the clicked button.

Summary

To create dynamic filter buttons for CMS Events, set manual buttons with data-filter attributes, assign matching data-category values on CMS items, and use a simple JavaScript snippet to show/hide items based on the selected filter.