How to Add Previous and Next Links to Your CMS in Framer

Sep 22, 2023

Step 1: Add ID to Your Articles

First, make sure each article in your CMS has a unique ID. For example, you can assign ID 1 to Article 1, ID 2 to Article 2, and so on.

Step 2: Adding Collection Items

Within your Framer project, add two Collection items to your blog pages. These collection items will serve as placeholders for the "Previous" and "Next" links.

Step 3: Configuring the "Previous" Collection

For the "Previous" collection item, you'll need to set up a filter. Here's how:

  • Add a filter for the ID field.

  • Set the condition to "Less than."

  • Specify the value as the current ID of the article.

  • Reverse the sorting order to ensure you get the previous article.

  • Add a limit of 1 to fetch only one result.

Step 4: Configuring the "Next" Collection

Now, let's configure the "Next" collection item:

  • Add a filter for the ID field.

  • Set the condition to "Greater than."

  • Specify the value as the current ID of the article.

  • Add a limit of 1 to fetch only one result.

And there you have it! You've successfully added "Previous" and "Next" links to your CMS blog pages in Framer.