Webflow cms year filter

Want a simple way to show only 2025 (or any year) items from a Webflow CMS list?This tiny helper uses data attributes—no jQuery, no libraries—to filter your CMS cards by year, highlight the active button, and show a friendly “No items found” message when there’s nothing to display.

‍

✅ What This Does

This lightweight animation:

• Filters a CMS list by year using buttons like 2025 / 2024 / 2023
• Works with one or multiple sections on the same page
• Adds an active state to the selected button
• Supports deep links like ?year=2025 or #year=2025
• Shows a custom empty message when no items match
  ‍

🛠️ How to Use It in Webflow

1. Add the script

Wrap each filterable block (buttons + list + empty text) in a parent with data-year-scope.

• Buttons: add data-filter-year="2025" (and so on).
• CMS Item wrapper (the repeating card): add data-year="YYYY".
  • In Webflow, bind your Date field and set the format to Year.
• Empty text (optional): add a plain text element with data-empty

<div data-year-scope>
  <div class="year-buttons">
   <!-- CMS Collection Item wrapper -->
    <button data-filter-year="2025">2025</button>
    <button data-filter-year="2024">2024</button>
    <button data-filter-year="2023">2023</button>
    <button data-filter-year="all">All</button>
  </div>

  <div class="cards">
    <!-- CMS Collection Item wrapper -->
    <article class="card" data-year="2025">…</article>
    <article class="card" data-year="2024">…</article>
    <!-- etc. -->
  </div>

  <p data-empty>No items found.</p>
</div>

‍

3) Important Webflow notes

• Put data-year on the Collection Item wrapper (the element that repeats), not on a child text node.
• Turn off pagination for that list, or use a “load all” approach (e.g., Finsweet CMS Load) so all items are in the DOM for filtering.
• Place the script Before </body> in Page Settings or Site-wide Custom Code.