👉 View Example

There's a video tutorial coming soon. In the meantime, here's a step-by-step guide.

Setting up your Collection List

Assuming you already have a collection full of items to paginate, add a Collection List to your page and connect it to your source.

Adding Pagination

First, we'll turn on pagination and apply some basic styling to Webflow's default pagination:

  1. Turn on Paginate items in the Collection List's settings

  2. Select the Pagination element in the Navigator and set "Show page count" to ON.

    Untitled

  3. Give the Page Count element that appears a class of page-count and set it to be style it as show below:

    Untitled

Preparing Link Styles

Next we'll add and style some "dummy" template links and style them before removing them from the page all together. We'll add code to dynamically add them to the page later.

  1. Add a Text Link anywhere on your page and give it a class of page-link. Style it however you like—this will be the default state of your links. Don't forget to style the hover state too!

    Untitled

  2. Next, add a combo-class to your text link of current-page. This will be the state of the link for the currently selected page. Again, style it however you like.

    Untitled

  3. Once you've styled your links, delete the Text Link from the page.

Adding the Custom Code Snippet

Here's where all the magic happens. Copy and paste the below snippet before the closing </body> tag on the page where you have your collection list.