Pagination
Navigate long collections with clear page state, result context and accessible controls.
Numbered pagination
The standard pattern for known result pages.
Viewing page 3 of 8
Previous and next
A simple choice for linear flows and focused detail lists.
Page 1 of 4
Compact pagination
Use a shorter control in narrow cards and mobile layouts.
The surrounding layout can collapse intermediate page numbers.
Cursor pagination
Use cursor-based navigation when total page count is unavailable.
Loaded 20 recent updates
Pagination with result count
Always pair a page control with the result range when possible.
Showing 21-30 of 84 projects
Jump to page
Allow direct navigation for large result sets.
Go to pageof 8
Table pagination
Keep row selection, page size and navigation together at the bottom of a data table.
| Project | Owner | Status | ID |
|---|---|---|---|
| Website Redesign | Sophia Carter | At risk | PRJ-1042 |
| Mobile App | Daniel Lee | On track | PRJ-1043 |
| Brand Refresh | Mia Chen | On track | PRJ-1044 |
| Customer Portal | Noah Bennett | On track | PRJ-1045 |
| Analytics Hub | Sophia Carter | On track | PRJ-1046 |
Rows per page1-5 of 19