CMS Prev/Next

Show the next and previous CMS collection items.
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How to add CMS Prev/Next Navigation in Webflow?[.c-title_step]

Use the Refokus CMS Prev/Next tool to show the next and previous CMS collection items. This tool is incredibly useful for showing the next article on a Blog CMS Template, or on a case study CMS Template.


[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

[.c-text_step]Add the following script in the "Before tag" field under the "Custom Code" section in the page settings.[.c-text_step]

<script src="https://tools.refokus.io/next-prev-articles/bundle.v1.0.0.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

Everything is made using custom attributes, so when we say “Add ” that means “Add a custom attribute”.

  • Create a Collection List and hide it (display: none)
  • To that Collection List, add [.c-tool_tag]r-prevnext-source="1"[.c-tool_tag] as a custom attribute.
  • Add a link element with the attribute [.c-tool_tag]r-prevnext-next-btn="1"[.c-tool_tag] for “Next”
  • To display content from the next or the previous CMS Item, you can link the content of the collection using the following attributes:
    • [.c-tool_tag]r-prevnext-next-img="1"[.c-tool_tag] or [.c-tool_tag]r-prevnext-prev-img="1"[.c-tool_tag] for images
    • [.c-tool_tag]r-prevnext-next-text="1"[.c-tool_tag] or [.c-tool_tag]r-prevnext-prev-text="1"[.c-tool_tag] for text
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

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