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 Reference Fields in the CMS (e.g., "Previous Post" and "Next Post") and manually assign links for each post.
- Insert Link Blocks in the CMS Template and connect them to the corresponding reference fields.
- Use Conditional Visibility to hide links when no previous or next post exists.
- For automatic sorting, use JavaScript to fetch and generate dynamic links.
To create Previous and Next navigation links for CMS items (e.g., blog posts) in Webflow, follow these steps:
1. Use a Reference or Multi-Reference Field
- Webflow lacks built-in “Previous/Next” navigation for CMS items. You need to manually set up relationships using a Reference or Multi-Reference field.
- In your CMS Collection (e.g., Blog Posts), add a Reference Field named "Previous Post" and another named "Next Post."
- Manually assign each post's previous and next entries.
2. Add Link Components in the CMS Template
- Open your Collection Page for the CMS template (e.g., Blog Post Template).
- Add two Link Blocks or Text Links for navigation.
- Connect these links to the Previous Post and Next Post fields.
3. Set Link Conditions
- Use Webflow’s Conditional Visibility to hide links if the field is empty (e.g., no next post if it's the most recent one).
- Select the Link Block > Go to Element Settings > Enable Conditional Visibility > "When Previous Post or Next Post is set."
4. Alternative: Custom Code for Dynamic Sorting
If you want fully dynamic sorting based on date:
- Webflow doesn't natively support "next by date," but you can use JavaScript.
- Fetch all CMS items dynamically, sort them by date, and generate Previous/Next links using the Webflow CMS API or JavaScript/jQuery.
Summary
Webflow doesn’t have automatic previous/next post functionality, but you can create it using Reference Fields or custom JavaScript. Manual linking via Reference Fields is the easiest built-in solution.