Choose pagination when users move through ordered slices of one collection and need current page, previous, next, edge states, result range, total count, and preserved query, filters, sort, or page size.
Choose pagination when users move through ordered slices of one collection and need current page, previous, next, edge states, result range, total count, and preserved query, filters, sort, or page size.
Practice the judgment: Imagine this situation: Page numbers 1, 2, 3, and 4 render as identical links and none is announced as current. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Pagination without current page | Pagination | Breadcrumbs | Step navigation / step indicator | Feed |
|---|---|---|---|---|---|
| UI or UX | UI + UX - Missing pagination position anti-pattern | UI + UX - Paged navigation control | UI + UX - Hierarchy orientation navigation | UI + UX - Linear multistep task progress indicator | UI + UX - Dynamic stream of article-like updates that may load or insert content at either end |
| UI guidance | Show exactly one current page in each pagination set, expose it with text and aria-current="page" when page controls are links or buttons, and keep previous, next, result range, total count, and edge states consistent with that current page. | Render a labeled pagination nav near the affected results with current page, previous, next, nearby pages, optional first/last or ellipsis, and clear disabled edge states. | Render a labeled breadcrumb nav as an ordered hierarchy from the broadest relevant ancestor to the current page, with real ancestor links and a distinct current-page item. | Show a compact ordered list of named steps near the task heading, with visually distinct completed, current, upcoming, optional, and error states. | Render the feed as a labelled stream of item boundaries where each item has a source or author, timestamp, title or body summary, type, actions, and enough context to stand alone as an article-like update. |
| UX guidance | Help the person reach a clear task outcome. | Help users move through an ordered result set with a stable sense of position, progress, and returnability. | Orient users who arrive deep in a site by exposing the canonical parent-child relationship for the current page. | Use step navigation to reduce uncertainty in long linear tasks by showing where users are, what is done, and what remains. | Use feed when users consume a continuing stream of posts, updates, stories, events, or collaboration activity and need to keep their reading position while new or older content appears. |
| Good UI | A results list says Showing 21-30 of 118 and the pagination marks Page 3 as Current page with aria-current="page". | Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear. | Home, Projects, Migration, and Runbook appear in hierarchy order with ancestor links and Runbook marked current. | A five-step application shows Eligibility complete, Contact details current, Documents upcoming, Review upcoming, and Submit upcoming, with the current step emphasized and a matching page heading. | A project feed shows source avatar, actor, timestamp, object name, excerpt, item type, unread marker, reply and save actions, and a visible queued-new-items banner while the reader is midstream. |
| Bad UI | Previous and next appear active at the first or last page. | Pagination jumps around as pages load or separates controls from the result list. | Recent clicks are displayed as if they were the page hierarchy. | All future steps look clickable and complete even though required earlier fields are blank. | New posts appear above the current paragraph and shift the page while the user is reading. |
| Good UX | A reviewer returns to search results and sees Page 4, 31-40 of 96, query appeal, and sort Newest still aligned. | Users move through pages while query, filters, and sort persist. | Opening a saved deep link still shows the same parent path and lets users jump to Migration or Projects. | After a user enters valid contact details and continues, Contact details becomes complete and Documents becomes current. | A user pauses live updates, reads three older posts, sees 2 new updates waiting, then chooses Jump to latest when ready. |
| Bad UX | Screen reader output lists several page numbers but none is announced as the current page. | Changing page resets filters. | The breadcrumb changes after every click, so the same page shows different trails for different users. | The indicator says Step 4 of 5 while the page content and route still show Step 2. | The feed jumps to the top whenever a new post arrives. |
| Best fit | Use this anti-pattern to review result pages, data tables, search results, inboxes, catalogs, audit logs, resource lists, and generated pagination controls. | The collection has many ordered results. | Pages sit inside a clear parent-child hierarchy. | A linear form, application, checkout, or setup flow has three or more meaningful steps. | Users consume a continuing stream of updates, posts, stories, comments, media, or collaboration activity. |
| Avoid when | The numbers represent workflow steps, document pages, carousel slides, calendar dates, or sibling tabs rather than ordered result pages. | Users need uninterrupted reading or comparison. | The flow is linear task progress rather than site hierarchy. | The journey has only one or two screens. | The content is a finite set of objects that users need to filter, sort, select, compare, or manage. |
| Required state | Default middle-page state with exactly one visible current page and matching result range. | First page with disabled previous control. | Interior page with full ancestor trail. | Default state with completed, current, and upcoming steps. | Default feed with heading, order label, rendered item count or range, and article-like items. |
| Accessibility burden | Expose the current page with aria-current="page" or equivalent current-state text in the pagination region. | Use a labeled navigation region. | Place the trail in a labeled nav element. | Use aria-current on the current labeled step and include hidden or visible status text for completed, current, upcoming, optional, and error states. | Give the feed a heading or accessible label and expose the current order or filter in text. |
| Common misuse | Relying on the browser URL as the only current-page indicator. | Using pagination for a tiny collection. | Showing browsing history instead of hierarchy. | Using a step indicator as breadcrumbs, tabs, side navigation, or pagination. | Calling any vertical card list a feed even when it is a bounded object collection. |