How to Add Previous/Next Navigation to Webflow CMS Templates with Finsweet

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to add previous/next navigation to Webflow CMS collection template pages with Finsweet Attributes Prev/Next.

Understand the native limitation

Webflow doesn't offer built-in previous/next navigation on collection template pages. Finsweet Prev/Next automatically generates links to the previous and next item in your collection, based on the same sort order as your main Collection List.

1. Add the script to the head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-prevnext@1/prevnext.js" defer>script>

2. Create the navigation buttons

On your CMS template page, create two Link Blocks: one for "Previous article" and one for "Next article." These links don't need a URL — Finsweet fills them in dynamically.

3. Add the attributes

On the "Previous" Link Block:

• fs-prevnext-element="prev"
• fs-prevnext-collection="articles" (your collection slug)

On the "Next" Link Block:

• fs-prevnext-element="next"
• fs-prevnext-collection="articles"

4. Set the sort field

To make previous/next navigation follow the same order as your main list, add fs-prevnext-field="date" (or the field your list is sorted by). Without this attribute, Finsweet uses the items' creation order.

Conclusion

Previous/next navigation reduces bounce rate on content pages. Use cases:

• Navigate between blog posts
• Move through step-by-step tutorials
• Browse a portfolio project by project