How can I link to the previous or next CMS item in Webflow, such as in a collection of blog posts, based on date or other data?
TL;DR
- Add two filtered Collection Lists on the CMS Template page referencing the same collection.
- Filter by Date (or number field) with "greater than" for next and "less than" for previous post.
- Sort ascending for next, descending for previous, and limit both to 1 item.
- Use a Link Block inside each list linking to the current CMS item, and optionally hide the element with custom code when empty.
To create previous/next links between CMS items in a Webflow collection—such as blog posts—you need to use Webflow’s Collection List with filters and some custom logic based on fields like date or order.
1. Use the Same Collection
- Place a Collection List inside your blog post CMS Template page.
- Set it to reference the same Collection (e.g., "Blog Posts").
2. Filter the Collection List for Previous/Next Items
- Add a Filter based on a field in the collection, typically Date or an auto-incrementing Number field.
- For a Next post link:
Filter where: Date is greater than Current Blog Post's Date. - For a Previous post link:
Filter where: Date is less than Current Blog Post's Date.
3. Sort the Collection List Properly
- For the Next Post Collection List:
- Sort by Date (ascending) so the "next" appears first.
- For the Previous Post Collection List:
- Sort by Date (descending) so the "previous" appears first.
4. Limit to 1 Item
- In both Collection Lists, set the Limit to 1 item.
- This ensures you only display the closest next or previous post.
5. Add a Link Block
- Inside each Collection List, add a Link Block or Link Text.
- Set the Link to Current Blog Post.
- Add any elements you want to display (e.g., title, thumbnail).
6. Optional: Handle When No Post Exists
- Webflow doesn’t natively allow conditionals (e.g., “only show if exists”), so a workaround is:
- Use a small custom code snippet to hide the element if the Collection List is empty.
- Or design your site layout so it looks natural if a "Previous" or "Next" post isn’t shown.
Summary
To link to previous or next CMS items in Webflow, place filtered Collection Lists on your CMS Template Page. Use greater than/less than filters with date (or another field), sort appropriately, and limit to 1 item to simulate next/previous navigation.