How to Create a Pagination for CMS Collections in Framer

Learn how to add pagination to your CMS collections in Framer, including Load More, Infinite Scroll, Next and Previous, Page Selector, and Pagination Table options.

Note: CMS Pagination is now supported natively in Framer. This guide shows how to use custom overrides for more advanced or flexible pagination setups.

Setting Up the Collection List

To enable pagination, start by applying a custom code override to your Collection List.

1. Select your Collection List on the canvas.

2. Apply the override function named withCollectionList.

3. Open the code file and set the LIMIT variable to control the number of items displayed per page.

   • Do not add a limit directly in the Framer Collection List settings, as this may cause bugs.

Adding Load More Pagination in Framer

The Load More option lets users click a button to reveal additional content.

1. Create a Button on your page.

2. Apply the override function named withLoadMore to that button.

3. Preview and click the button to confirm it loads more items correctly.

   • Make sure your CMS collection contains enough data to test pagination properly.

Adding Infinite Scroll for CMS collections in Framer

The Infinite Scroll option automatically loads more items as the user scrolls down the page.

1. Create a section below your Collection List (for example, a footer).

2. Apply the withInfiniteScroll override to that section.

3. Preview the site and scroll to the bottom: when the user approaches the footer, more items will load.

Note: Pagination may not always work perfectly inside Framer previews. Publish your site for the most accurate results.

Adding Next and Previous Pagination for CMS collections in Framer

This method allows users to move between pages using Next and Previous buttons.

1. Create a component with four variants:

   • Previous (clickable)

   • Previous Disabled (displayed when you cannot go to the previous page)

   • Next (clickable)

   • Next Disabled (displayed when you cannot go to the Next page)

2. Apply the withPrevious override to the Previous button and the withNext override to the Next button.

3. Preview to confirm the navigation works smoothly.

And voilá, your Next and Previous pagination is now working.

Adding a Page Selector Pagination for CMS collections in Framer

A Page Selector displays clickable page numbers. It works best when you have a small number of pages. This is how to do it:

1. Create a component for the page selector.

2. Add two variants:

   • Page Number (clickable)

   • Page Number Active (not clickable)

3. Apply the withPageSelector override to the component.

You can adjust spacing between numbers by adding padding inside the component.

Creating a Pagination Table for CMS collections in Framer

The Pagination Table method is ideal for larger collections where users need full navigation control.

1. Create a component with a variable named page and two variants:

   • Page Number

   • Page Number Active

2. Apply the withTablePagination override to the component.

Optionally, include Next and Previous buttons alongside the table for easier navigation. 

The Result

You now have a complete pagination system for CMS collections in Framer. Each method from Load More, Infinite Scroll, Next and Previous, Page Selector, to Pagination Table offers different user experiences, depending on your layout and content needs.

Feel free to customize the pagination to suit your specific needs. And if you encounter any issues or want help refining your setup, feel free to reach out!