How can I create a dropdown menu in Webflow that filters blog content based on selected categories from a separate CMS?
TL;DR
- Create Blog Posts and Categories CMS Collections, linking posts to categories via a Reference field.
- Add a Dropdown using a Collection List of Categories with dynamic data-category attributes.
- Display all blog posts by default in a separate Collection List, assigning matching data-category attributes to each item.
- Use JavaScript to filter visible blog posts based on the selected dropdown item, and optionally include an “All” option to reset the filter.
To create a dropdown menu in Webflow that filters blog content by category, you'll use two CMS Collections—one for blog posts and another for blog categories—and apply custom filtering logic using Webflow CMS and JavaScript.
1. Set Up Your CMS Collections
- Create a Blog Posts Collection with fields like Title, Content, etc., and add a Reference or Multi-Reference field linking to your Categories Collection.
- Create a Blog Categories Collection with a field for Category Name.
2. Add the Dropdown Menu
- Drag a Dropdown element onto your page.
- Use a Collection List inside the Dropdown to pull data from the Categories CMS Collection.
- Insert a Text Block inside each Dropdown Item to display the category name.
- Add a custom attribute (e.g.,
data-category) to each Dropdown Item and set its value dynamically from the CMS (e.g., category slug or ID).
3. Display Blog Posts
- Add a Collection List on the page connected to the Blog Posts CMS Collection.
- Style and structure it however needed to show blog info (title, date, summary, etc.).
- Make sure this Collection List is set to display all blog posts by default.
4. Add Custom Filtering with JavaScript
Webflow does not support dynamic CMS filtering out-of-the-box, but you can implement it manually with JavaScript:
- Use JavaScript to:
- Listen for clicks on dropdown items.
- Read the selected category name or slug from the clicked item's
data-categoryattribute. - Loop through blog items and show/hide them based on whether they match the selected category (you will need to add matching
data-categoryattributes on each blog item based on their category). - Example: Set
data-categoryon each blog post wrapper corresponding to its category slug so it can be filtered.
You can use tools like Finsweet's CMS Library (https://cmsdocs.webflow.io/) to simplify filtering without advanced coding.
5. Add a “Reset Filter” Option (Optional)
- Add an additional default Dropdown Item labeled “All”.
- In your JavaScript, include logic to show all blog posts when “All” is selected.
Summary
Create a dropdown menu using a CMS Collection List of categories, assign category data attributes to blog items, then filter them using JavaScript or the Finsweet CMS Filter tool. This separates content and filter options into different CMSs while maintaining dynamic interactivity.