How can I show next and previous posts from within a single post of a collection using Webflow?
TL;DR
- Add two Collection Lists inside the Collection Page for Previous and Next post navigation.
- Filter the Previous Post list to show the most recent past post by setting "Post Date is before Current Item’s Post Date" and sorting descending.
- Filter the Next Post list to show the closest future post by setting "Post Date is after Current Item’s Post Date" and sorting ascending.
- Add Link Blocks inside each Collection Item to dynamically link to the respective post.
- Enable “Hide if Collection is Empty” to avoid showing empty navigation links.
To display Next and Previous posts within a single Collection item in Webflow, follow these steps.
1. Add Collection Lists for Navigation
- Inside your Collection Page (where you're displaying individual posts), add two Collection List elements.
- These lists will serve as your Previous Post and Next Post links.
2. Filter the Previous Post
- Select the first Collection List and bind it to the same Collection as the current post.
- Go to the Collection List Settings and enable Filters:
- Filter by "Post Date" or "Created On"
- Set the condition: "Post Date is before Current Item's Post Date"
- Sort by "Post Date – Descending" (to show the closest previous post).
- Limit the list to 1 item (to get only the most recent past post).
3. Filter the Next Post
- Select the second Collection List and bind it to the same Collection.
- Apply these filter settings:
- Filter by "Post Date" or "Created On"
- Set the condition: "Post Date is after Current Item's Post Date"
- Sort by "Post Date – Ascending" (to show the closest future post).
- Limit the list to 1 item (to display only the next post).
4. Link to the Next and Previous Posts
- Inside each Collection Item, add a Link Block or Text Link.
- Set it to Get URL from the Current Collection item so it dynamically links to the referenced post.
5. Hide Links If No Next or Previous Post Exists
- Select each Collection List and go to Element Settings.
- Enable “Hide if Collection is Empty” so the Previous/Next links only show when applicable.
Summary
To show Next and Previous posts, use two filtered Collection Lists within your Collection Page. One lists items before the current post, and the other lists items after. This creates navigation that dynamically updates based on each post.