data-filter
attributes matching CMS item categories.data-category
attributes to each CMS item using category data, then use JavaScript to show/hide items based on the selected filter.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.
data-filter
music
, sports
).event-item
).data-category
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.
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.