Webflow sync, pageviews & more.
NEW

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.
  • 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.

Rate this answer

Other Webflow Questions