How can I create a self-generating blog post navigation menu using Webflow?
TL;DR
- Create a Blog Posts CMS Collection with relevant fields like Name, Slug, and Publish Date.
- Add a Collection List to the desired page and bind it to the Blog Posts Collection.
- Insert and style text links inside the list, linking each to the current blog post.
- Optionally sort, filter, or limit the list, turn it into a reusable Symbol, and use conditional visibility for advanced features.
To create a self-generating blog post navigation menu in Webflow, you’ll use a Collection List connected to your CMS blog posts. This allows the nav menu to update automatically as new blog posts are added.
1. Create a Blog Posts CMS Collection
- Go to the CMS panel and click + New Collection.
- Name it something like Blog Posts.
- Add necessary fields like Name (title), Slug, Publish Date, Main Content, etc.
- Click Create Collection when done.
2. Build a CMS Collection List for Navigation
- On the page or symbol where you want your navigation menu, drag in a Collection List.
- Bind it to the Blog Posts Collection.
3. Style the Blog Nav Items
- Inside the Collection List, add a Text Link (or Link Block containing a Text element).
- Bind the link text to the Name field (or Title).
- Set the link destination to the Current Blog Post using the CMS link selector.
4. Limit or Sort the Navigation (Optional)
- In the Collection List’s settings, add a Sort Order (e.g., Date descending).
- Use filters if needed (e.g., only show Featured blog posts or only a certain category).
- Add a limit if you only want to show a certain number of posts.
5. Place the Nav Menu as a Symbol (Optional)
- If you plan to reuse this nav across multiple pages, wrap your Collection List in a Div Block, then create a Symbol.
- That way, the blog navigation remains synced across pages.
6. Use Conditional Visibility (Optional)
- You may want to highlight the current blog post.
- Add a class to the current link using custom code or reference current page slug (requires more advanced customization).
Summary
To create a self-generating blog post navigation menu in Webflow, use a Collection List bound to your Blog Posts CMS Collection, set it to link to the current post, and optionally sort, filter, and style it. This setup ensures your navigation updates automatically as new posts are published.