Paginator divides a long content section into smaller pages. It supports Foundation Column Pro, Foundation Block Grid, Bento Mason, Feeds content, and Total CMS 1 or Total CMS 3 blog lists. The demo also shows Paginator used as an image slider.
Build a first paginated section
Add Paginator to the page.
Place one supported grid, list, or content source inside it.
Set Number of posts to the number of items that should appear on each page.
Choose the pagination bar position.
Publish and check that every source item is assigned to a page.
Start with static content before connecting a dynamic feed. This makes it easier to confirm the nesting and item count.
Understand the navigation
On desktop, Paginator displays previous and next controls plus numbered page buttons. On smaller screens it uses a page dropdown designed to avoid a crowded row of small targets. The published demo exposes this control as Page select.
Use more than one Paginator
Multiple paginated sections can run on one page as separate instances. Keep each content source inside its own Paginator and test every navigation bar independently.
First checks
Confirm the first page contains the expected number of items.
Use previous, next, a page number, and the mobile selector.
Check the final page, which may contain fewer items.
Test all links and interactive content after a page change.
Next: Paginating grids, Feeds, and Total CMS lists and Configuring navigation, scrolling, animation, and styling.