How can I create categories in Webflow to filter my blogs?
TL;DR
- Create a Categories Collection and link it to Blog Posts using a Reference or Multi-Reference field.
- Display categories as clickable filter buttons or use a Category Template Page with filters applied.
- For real-time filtering on a single page, implement custom JavaScript like Mixitup.js with category-specific attributes.
To filter your blog posts by categories in Webflow, you'll need to use CMS Collections and Collection Lists with filters or dynamic filtering using buttons or dropdowns.
1. Create a Category Collection
- Go to the CMS panel and click “+ New Collection.”
- Name it “Categories.”
- Add a “Name” field (required) and a “Slug” field if needed.
- Publish the collection.
2. Link Your Blog Posts to Categories
- Open your "Blog Posts" Collection.
- Add a Reference or Multi-Reference field that links to the Categories Collection (use Multi-Reference if posts can belong to more than one category).
- Name the field something like “Blog Category”.
- Update existing posts and assign categories.
3. Display Categories as Filter Buttons
- On your blog page, add a Collection List bound to the Categories collection.
- Style each item as a Clickable Button, Link Block, or Text Link.
- Connect the link to the current Category’s page using the slug or use a filter interaction if staying on the same page.
4. Create a Category Template Page (Optional)
- Webflow automatically creates a Template Page for each CMS Collection.
- Go to the Categories Template Page, and add a Collection List of Blog Posts.
- Apply a Filter: "Blog Category contains Current Category".
- Style your blog layout as needed.
5. Add Filters on a Single Blog Listing Page (Optional)
If you're not using the category template page and want inline filtering:
- Use JavaScript (like Mixitup.js) to allow dynamic filtering on a single page.
- Add custom attributes or classes to each blog post that identify their category.
- Use user interaction (e.g., buttons) to show/hide posts using category targets.
- Webflow doesn’t support dynamic filtering natively—custom code is required for real-time filtering.
Summary
To filter blogs by category in Webflow, create a Categories Collection, link it to your Blog Posts using a Reference field, then display and filter using Collection Lists and Filters. For advanced on-page filtering, you’ll need custom JavaScript.