>

>

How To Add CMS Previous/Next Navigation In Framer

How To Add CMS Previous/Next Navigation In Framer

Jan 29, 2024

|

2 min read

|

How To Add CMS Previous/Next Navigation In Framer
How To Add CMS Previous/Next Navigation In Framer
How To Add CMS Previous/Next Navigation In Framer

Introduction


Welcome to this Framer tutorial, where you’ll discover how to add previous/next navigation buttons to your CMS collection without the need for any code!


This guide is entirely beginner-friendly, and to make things even easier, I’ve prepared a free working project you can remix for reference.


Interested? Let’s get started!


Step 1: Add An ID To Your CMS Collection


Assuming you already have some sort of CMS collection in place, the first step is to add an ID to its items.


The ID will be a number field that allows us to give the items an order to follow while displaying them.


To add an ID to your collection list, follow these simple steps:

  1. Navigate to the CMS collection.

  2. In the top bar, choose “edit fields” and use the + button to add a new number field (the ID).

  3. Feel free to rename it; for our example, let’s call it “ID”.


Adding an ID to the CMS collection


Step 2: Add Two Collection Lists To Your Detail Page


On the detail page of your collection list, you’ll need to add two distinct collection lists: one for the previous article and another for the next one.


Each collection list should have a limit of 1. The collection list for the previous article will use the default sorting, while the other will be set to reverse sorting.


Add Two Collection Lists To Your Detail Page


Note: Set the exact opposite sorting rules if your collection list has the smallest number at its top.


Step 3: Set Up The Filters


It’s now time to set up our filters. Here’s how:

  1. Select the collection list.

  2. In the right sidebar, under the CMS Content section, click on “add filter”.

  3. Set the field to be the ID you created earlier.

  4. Set the condition to be less than/greater than (depending on whether you want the previous item or the following one).

  5. Set the value to be equal to the current item’s ID (using variables).


Repeat this process for the other collection list, and you’re all set!


Set Up The Filters for the CMS collections


Conclusion


Thanks for taking the time to read the guide, I hope you found it helpful! If you need any assistance with your Framer website, do not hesitate to reach out.


If you enjoyed the article, I encourage you to share it with a friend! Thanks in advance ;)

Introduction


Welcome to this Framer tutorial, where you’ll discover how to add previous/next navigation buttons to your CMS collection without the need for any code!


This guide is entirely beginner-friendly, and to make things even easier, I’ve prepared a free working project you can remix for reference.


Interested? Let’s get started!


Step 1: Add An ID To Your CMS Collection


Assuming you already have some sort of CMS collection in place, the first step is to add an ID to its items.


The ID will be a number field that allows us to give the items an order to follow while displaying them.


To add an ID to your collection list, follow these simple steps:

  1. Navigate to the CMS collection.

  2. In the top bar, choose “edit fields” and use the + button to add a new number field (the ID).

  3. Feel free to rename it; for our example, let’s call it “ID”.


Adding an ID to the CMS collection


Step 2: Add Two Collection Lists To Your Detail Page


On the detail page of your collection list, you’ll need to add two distinct collection lists: one for the previous article and another for the next one.


Each collection list should have a limit of 1. The collection list for the previous article will use the default sorting, while the other will be set to reverse sorting.


Add Two Collection Lists To Your Detail Page


Note: Set the exact opposite sorting rules if your collection list has the smallest number at its top.


Step 3: Set Up The Filters


It’s now time to set up our filters. Here’s how:

  1. Select the collection list.

  2. In the right sidebar, under the CMS Content section, click on “add filter”.

  3. Set the field to be the ID you created earlier.

  4. Set the condition to be less than/greater than (depending on whether you want the previous item or the following one).

  5. Set the value to be equal to the current item’s ID (using variables).


Repeat this process for the other collection list, and you’re all set!


Set Up The Filters for the CMS collections


Conclusion


Thanks for taking the time to read the guide, I hope you found it helpful! If you need any assistance with your Framer website, do not hesitate to reach out.


If you enjoyed the article, I encourage you to share it with a friend! Thanks in advance ;)

Luca Da Corte

Luca Da Corte is a freelance Framer Expert and SEO specialist. When he’s not working on some exciting projects, he curates a blog where he shares insights, resources, and experiences on everything regarding websites.

Table Of Contents:

Introduction
Step 1: Add An ID To Your CMS Collection
Step 2: Add Two Collection Lists To Your Detail Page
Step 3: Set Up The Filters
Conclusion

Table Of Contents:

Introduction
Step 1: Add An ID To Your CMS Collection
Step 2: Add Two Collection Lists To Your Detail Page
Step 3: Set Up The Filters
Conclusion

Table Of Contents:

Introduction
Step 1: Add An ID To Your CMS Collection
Step 2: Add Two Collection Lists To Your Detail Page
Step 3: Set Up The Filters
Conclusion