Split Pagination
Pagination with prev and next pushed to opposite edges and page numbers centered. Spreads controls across wide footers and full width content areas.
Pagination with prev and next pushed to opposite edges and page numbers centered. Spreads controls across wide footers and full width content areas.
Search blocks by description or jump to a page.
Split Pagination divides navigation into three zones across a single row. The Previous control sits at the left edge, a centered cluster of numbered page links with an ellipsis sits in the middle, and the Next control sits at the right edge. The active page is visually distinguished within the cluster, and the ellipsis marks where the sequence jumps to the last visible number.
On narrow screens the three zones stack vertically and re-center, then snap back to the spread layout once there is enough horizontal room. The copy on the Previous and Next buttons, the page numbers shown, and how many pages appear before the ellipsis are all straightforward to adjust without affecting the overall layout.
Reach for this layout when your content area is wide and a single centered row of numbers would leave the directional controls visually lost in the middle. It suits an AI assistant product well: conversation history lists, saved prompt libraries, and multi-page context logs all benefit from controls that feel spread across the full width of the panel. Compared to Compact Pagination, which trades width for a tight footprint, this block claims the full horizontal span and reads as a confident footer rather than a tucked-away detail.
A natural flow around it on a Components page:
Before
After
The block separates direction and position into independent controls, which gives you a few clear handles:
Tip: anchor the wrapper to the bottom of your content container rather than the viewport so the controls scroll naturally with the list above.