How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional

CMS Previous Next

Create previous and next items on Webflow CMS Templates

2,767,584

loads per month

CMS Previous Next
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
LIST
I want to use this

Collection List or Collection List Wrapper

See how it works
see webflow attributes
as the source of my Previous and Next item
Add this attribute
Description
Name
fs-cmsprevnext-element
copy icon
Value
list
copy icon
Check live example (opens new tab)
This is the CMS Collection List that will be used to generate the "Previous" and "Next" content.

*IMPORTANT: There must be a url link to the Template page of each item. See screenshot of setup below.

Based on this url link to the Template page, Attributes will look in this Collection List for the current item. This is the CMS Template page the user is on. Based on the current item, Attributes will find the Previous and Next item.

The Previous item in the list will be placed in the previous element. The Next item will be placed in the next element.

This list can be hidden on the page with display: none. It is only used to generate the content for the Previous and Next post.
how to add cms previous next list attribute
navigator arrow
PREVIOUS
I want this
div block icon

Div Block

to hold the Previous item in the list
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsprevnext-element
copy icon
Value
previous
copy icon
This Div Block will be the parent wrapper of the "Previous" CMS Item in the list.

See definition of "Next" and "Previous" in the list attribute description.
how to add cms previous attribute
navigator arrow
NEXT
I want this
div block icon

Div Block

to hold the Next item in the list
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsprevnext-element
copy icon
Value
next
copy icon
This Div Block will be the parent wrapper of the "Next" CMS Item in the list.

See definition of "Next" and "Previous" in the list attribute description.
how to add cms next attribute

Working examples

See this solution working live in this Webflow project.

Example
Previous Next items on CMS Template page
Copy and paste this example directly on Webflow
locked icon
Coming soon
View example on CMS Template page

Combinations using CMS Previous Next:

You can combine this Attribute with others to create more complex solutions.

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.