If you do not need the titles in the links, this is currently the easiest workaround for linking to previous and next CMS items WITHOUT using a hidden collection list, so it importantly does not have the 100-item limitation.
Previously we had these workarounds if we wanted to link to the previous/next items:
- 74567 Adding Pagination (previous page/next page) to the CMS Template page - #3 by Noah-R
- 19525 Native linking to previous and next post or page using CMS - #19 by hammerhouse
- 113319 Native linking to previous and next post using CMS (expanded)
- 55240 Native linking to previous and next post with titles using CMS
- etc.
Pros:
- Won’t break links if you publish/unpublish items
- No 100-item collection list limitation, users can actually navigate through ALL items with this method
Cons:
- You won’t have dynamic prev/next links displaying the item title (but I have a possible idea to add on to below script to enable it)
- Sorted by item creation date, cannot be changed
- Need hosting plan, cannot be implemented on free plans
Here are the three simple steps:
-
Project settings > SEO > Sitemap > Auto-generate Sitemap: YES
-
Add a div element with class
cms-pagination, inside it drop two links: first for previous, and second for next. Design it as you wish.
-
Project settings > Custom Code > Footer Code, paste this:
<script> Webflow.push(function() { // CMS auto pagination based on sitemap const cmspager = $('.cms-pagination'); if(location.pathname.split('/').length === 3 && cmspager.length > 0) { const collectionUrl = location.href.replace(/[^/]+$/, ''); $.get('/sitemap.xml').done(function(data) { const items = $('loc', data).get().map(v => v.textContent).filter(v => v.indexOf(collectionUrl) === 0); const currentIndex = items.indexOf(location.href); if(currentIndex <= 0) cmspager.children().first().css({ visibility: 'hidden', 'pointer-events': 'none' }); else cmspager.children().first().attr('href', items[currentIndex - 1]); if(currentIndex >= items.length - 1) cmspager.children().last().css({ visibility: 'hidden', 'pointer-events': 'none' }); else cmspager.children().last().attr('href', items[currentIndex + 1]); }); } }); </script>
Example on my website, single cms item pagination Project: HealthXchange
