Webflow pagination does exist in a basic form with Prev Next buttons but currently does not show the breadcrumb name for the collection items. An example Webflow name pagination format would be <prev Item Name | Current Item Name | Next Item Name >. This conventional feature, commonly used for post pagination, is well developed in other CMS like WordPress. Before Webflow fills that gap, we can manipulate collections with jQuery and CSS to get a workable post pagination clone for Webflow. Here's how:-

Webflow Prev Next Pagination with Names

1. Create a Collection of your posts to paginate and add the Collection to canvas.
2. Sort the Collection by Date, Newest to Oldest. A custom date filter is often more flexible, but you can also use the 'Published On (Date/Time) if you prefer.  

3. Give the Collection List and Collection Item a class for script manipulation. In this case, we use 'Post Nav List' and 'Post Nav Item', respectively.

4. Add a 'Link Block' inside the Collection Item. A Class is unnecessary, but you can add one for styling; we have used 'Sidebar Link'. Bind the link in 'Link Settings' to Page, 'Current Post'.

5. Insert a 3 Col Grid (class 'Sidebar Link Grid' etc), 1 Row (with named areas Previous, Link & Next) inside the 'Link Block' to contain the prev next icons and the Name text in the middle.

6. Add a 'Text Block' (class 'Sidebar Link Text' etc) inside the 'Link Block' child Grid. Crucially apply 'Get text from [Collection Name]' (e.g. 'Posts') and select and bind the 'Name' option. Link the 'Text Block' to the 'Link' area in the Grid.

7. Add an Icon/Font awesome Icon < before and > after the text block and give both the class 'Icon'. Link your Areas for Icon/Previous, Text/Link and Icon/Next in the Grid.

‍
8. Set the Collection Item to CSS Layout Display 'None'.

9. Drag the Embed component onto the canvas (above the Collection Wrapper is in a Container Div is good), add any Class ('Post Navigation Script' etc) and then Cut & Paste the following code within:-

10. Replace '[Link Your Webflow Collection Item Name]' with the Webflow Collection Item 'Name' binding in the code.

The Navigator layout, depending on your classes, should now look something like:-

Webflow Pagination Structure

11. Publish your site to reflect the addition of the new Webflow Collection Pagination. 

You now have Pagination for Webflow Collections that will show the previous, current and next paginated item with the name shown at each level.

Webflow Prev Next Pagination with Names Demo

You can see this Webflow Post Pagination in action on our Blog sidebar.

NB This jQuery pagination script would also work with other CMS where you can output the name of the CMS 'Name' item.

Limitations of Webflow Prev Next Pagination approach

There are a few limitations to this approach of named pagination in Webflow:-

  1. The limit of Collection posts displayed in Webflow is 100. The jQuery script needs access to the unpaginated list to find the matching 'Name', and if it's in item 101+, it won't work. The workaround here is to duplicate the collection and 'Start at 101' to continue the lookup.
  2. It's not Ajax. If Webflow doesn't fill this pagination gap, this may come down the line, but we're not loading with Ajax for now. The Webflow standard Collection loads are not heavy as they are just the 'Name' text, but bear the addition in mind.
  3. Intuitively this only works on Webflow Template pages of the same Collection type, for example, 'Posts' on the 'Posts Template'. 
  4. It's not native and dependent on the jQuery library. Make sure you have jQuery loaded for the pagination to work.

These limitations are not significant, but for larger Webflow sites, a native Webflow version would certainly be more welcome.