How can I create a dropdown menu in Webflow that filters blog content based on selected categories from a separate CMS?
TL;DR
- Create a Categories CMS and link it to Blog Posts via a reference field.
- Add a dropdown menu bound to the Categories CMS that passes the category slug via URL.
- Assign each blog post a custom data attribute with its category slug.
- Use custom JavaScript to read the URL, compare slugs, and show/hide posts accordingly.
You can create a dropdown filter menu in Webflow for blog posts using a separate Categories CMS Collection through a combination of CMS list binding, filtering, and custom code. Here's how to set it up.
1. Create Two CMS Collections
- Blog Posts: Should already exist with fields like Title, Body, etc.
- Categories: Create a separate CMS Collection with a plain text field for the category name.
2. Link Blog Posts to Categories
- In the Blog Posts CMS, add a Reference field linking each post to one item in the Categories collection.
3. Add a Categories Dropdown
- Add a Dropdown element to the page (usually in a sidebar, menu, or above the blog list).
- Inside the Dropdown list, add a Collection List and bind it to the Categories CMS collection.
- Style each item as a clickable link or button that represents a category.
4. Set Category Links with URL Parameters
- For each category link, set the URL to something like:
/blog?category=category-slug- Use Get Text from Categories > Slug to dynamically pull in the slug.
- This allows you to filter blog posts based on the selected category from the URL query param.
5. Filter Blog Posts with Custom Code
- Webflow does not natively filter CMS content by URL parameters, so add custom JavaScript to:
- Read the URL (e.g.,
?category=business) - Hide all blog posts that do not match the selected category
- Match by comparing a custom attribute, such as
data-category, on each blog post element
6. Set Blog Post Items with Data Attributes
- In the Blog Posts Collection List, add a custom attribute to each item:
- Name:
data-category - Value: Get from Post > Category > Slug
7. Add Filtering Script (Custom JS)
- Place your script either inside an Embed component or in the Footer section of Page Settings.
- It should:
- Grab the
categoryfrom the URL - Loop through blog post elements
- Show/hide them based on whether
data-categorymatches
Summary
To filter blog content in Webflow using a dropdown connected to a separate Categories CMS, you need to:
- Connect Posts to a Categories collection via a reference field
- Set up a CMS-powered Dropdown that sends a category slug via URL
- Use custom JavaScript to read the URL and filter post elements on the page
This method enables a dynamic dropdown that filters CMS content without reloading the page or using external libraries.
