Any information contained on this Website is not legal advice and should not be treated as such. You should always contact an attorney for help with your specific legal needs and issues. We may also earn a commission when you click links to our partners and purchase goods or services. For more information, read our Disclaimers Policy.
Categories in Webflow are a separate CMS Collection that you connect to blog posts via a reference field. They’re not automatic — you build them intentionally, which means you get full control over how they’re structured and displayed.
This guide walks through building a category system from scratch: the Collection setup, connecting posts, displaying categories on post pages, and creating archive pages for each category.
Categories vs. Tags: Understanding Webflow’s Taxonomies
Before diving into setup, it’s worth understanding the difference between categories and tags in Webflow — because unlike WordPress, Webflow doesn’t have these as built-in concepts. You build both from scratch as CMS Collections.
Categories are broad, hierarchical groupings. A blog post typically belongs to one category (e.g., "Webflow," "SEO," "Business"). They create clear navigation and help users browse by topic area. Tags are more granular and overlapping. A post can have multiple tags (e.g., "Webflow CMS," "Tutorial," "Beginners"). They’re better for cross-cutting themes. In Webflow terms: Categories use a single-reference field (one category per post). Tags use a multi-reference field (many tags per post, many posts per tag). For most blogs, categories handle primary navigation while tags handle content filtering.
Step-by-Step: Building Your Webflow Blog Categories from Scratch
Step 1: Create a Dedicated ‘Categories’ CMS Collection
In Webflow’s CMS panel, click "+ New Collection" and create one named "Blog Categories" or simply "Categories." Essential fields to include: Name (required): The category name (e.g., "Web Design," "SEO Guides"). Slug (required): Auto-generated from the name — keep it clean and lowercase. Description (recommended): A short paragraph describing the category. Used on archive pages and for SEO. Featured Image (optional): Useful if you’re displaying category cards on the blog index.
Step 2: Populate Your Collection with Category Items
Add your initial categories. Keep the list focused — 4 to 8 categories is usually enough for a growing blog. More than 12 often signals that your taxonomy isn’t well-defined. Use clear, search-intent aligned names rather than internal jargon. "Webflow Tutorials" ranks better than "How-Tos."
Step 3: Connect Blog Posts to Your New Webflow Blog Categories
Open your Blog Posts Collection and add a new field: Field type: Reference. Field name: "Category" or "Blog Category." Source Collection: Select your Categories Collection. This creates a single-reference relationship — each blog post can be assigned to one category. To assign categories: Open each blog post in the CMS. Select the appropriate category from the reference dropdown. Publish the changes.
Displaying Categories for a Seamless User Experience
Displaying the Category on Individual Blog Post Pages
On your blog post template page: Add a text element or button where you want the category label. Connect it to the Category reference field. To link it to the category archive page: Wrap the text in a link element. Set the link to a Collection page URL. Use the Category slug to build the URL dynamically.
Creating a Dynamic Category Archive Page
Webflow automatically creates a Collection page for each item in your Categories Collection. This becomes your category archive page. To set it up properly: Go to the Category Collection page template. Add a Collection List that pulls from Blog Posts. Filter it to show only posts where the Category reference matches the current Category. Style the list to match your main blog index. Set a unique meta description using the Category Description field. Add an H1 using the Category Name field. This gives each category its own indexable page, which can rank for category-specific keywords (e.g., "Webflow tutorials" or "SEO guides").
Bonus: Implementing Blog Tags with Multi-Reference Fields
Once categories are working, tags follow the same pattern with one key difference: use a Multi-Reference field instead of a single Reference field. This allows each post to have multiple tags. The setup process is identical — create a Tags Collection, add a Multi-Reference field to Blog Posts pointing to it, then display them using a nested Collection List on the blog post template. See the Webflow Blog Tags guide for the full walkthrough.
More in this series: Webflow Blog Categories · Webflow Blog Tags · Webflow Blog Pagination · Webflow Blog RSS Feed · Webflow Blog Optimisation
Need a Webflow blog that’s set up properly from the start?
Matthew John Design builds Webflow sites with CMS architecture designed to scale — clean collections, logical taxonomies, and blog structures your team can actually manage. Get in touch to talk about your project.
