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 them via a multi-reference field.
- Build Collection Lists for both blog posts and categories, applying custom attributes like data-category and data-filter.
- Implement filtering with JavaScript or no-code tools like Finsweet's CMS Filter for dynamic interactivity.
You can create a dropdown filter for blog content using Webflow CMS by combining a Webflow Collection List with CMS-driven categories and custom filtering using Webflow's native features or optional JavaScript solutions.
1. Set Up Your CMS Collections
- Create two CMS Collections: one for Blog Posts and one for Categories.
- In the Blog Posts collection, add a multi-reference field linking each post to one or more categories.
2. Create the Dropdown Using the Categories CMS
- Add a Collection List to your page and connect it to the Categories Collection.
- Inside the Collection List, drag in a Dropdown Toggle and Dropdown List.
- For the dropdown to show filter options:
- Style each dropdown option (e.g., a Text Block or Link Block inside the List).
- Bind the text to the category name.
- Add a custom attribute like
data-filter="slug"to each item where "slug" is the category’s slug.
3. Display the Blog Posts
- Add another Collection List bound to the Blog Posts Collection.
- Design your blog post cards.
- For filtering to work, wrap each Blog Post item in a container (e.g., a
div) and assign a custom attribute likedata-category="{category-slug}". - You may need to limit each post to show only one category slug in this attribute if you're planning to use simple filtering logic.
4. Add Filtering Functionality with JavaScript
Webflow doesn’t support dynamic CMS filtering natively, so you’ll need to use custom JavaScript or a third-party tool like Jetboost, MixitUp, or Finsweet’s CMS Filter.
For a custom solution:
- Add a JavaScript script in your page's Footer section via Page Settings or inside an Embed block (avoid actual code blocks here).
- The script should:
- Detect clicks on the dropdown options.
- Compare the
data-categoryof blog posts with the selecteddata-filter. - Show/hide posts accordingly.
5. Optional: Use Finsweet's CMS Filter
- Finsweet’s tools give you full CMS filtering without code.
- Go to https://www.finsweet.com/attributes/cms-filter
- Follow their guide using Attributes like fs-cmsfilter-field and fs-cmsfilter-element.
- This integrates directly within Webflow using your dropdown and collection items.
Summary
To filter blog content by dropdown using categories from a separate CMS Collection: create a multi-reference field in Blog Posts, build two Collection Lists (one for the dropdown, one for blog posts), and apply category slugs with custom attributes. Then implement filtering via Finsweet’s CMS Filter or custom JavaScript.