Behavior comparison
Pagination vs Stepper
Decisive difference
Pagination browses peer pages of content in any order; Stepper tracks ordered stages of a process with a current position.
Choice criteria, links and sources
- PaginationChoose Pagination if the pages are equivalent slices of a collection and none must be completed before another.Open entry Pagination
- StepperChoose Stepper if a linear process has at least three meaningful stages the user completes in order.Open entry Stepper
See the nine dimensionsSee the sources
Orient within a journey
Try it
Should this locate the page in a hierarchy, move across result pages, or show a process stage?
Pagination
Shared trial context
Pagination
Mission
Pagination
Activate Next, jump to page 3, then return with Previous while verifying the current-page state.
Records from page 1
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- Page 1 is current and Previous is unavailable at the lower bound.
- Edge case
- An unknown final total omits a fake last-page destination and keeps Next truthful.
Stepper
Mission
Stepper
Use the separate Next and Back actions, verifying step statuses and the screen heading after every change.
- Details completed
- Documents current
- Review upcoming
2 / 3 — Documents
Segments communicate status; separate buttons control the workflow.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- Documents is current, Details is complete, and Review is upcoming.
- Edge case
- Returning to a completed step preserves entered data and recomputes statuses without making decorative segments clickable.
What this example shows
Pagination changes the quantity-based slice of one collection; Breadcrumbs expose hierarchy, while Stepper represents meaningful process stages.
Which fits your need?
Pagination
Search results or collections need stable shareable pages
Stepper
A stable linear process has at least three meaningful sections
Difference and sources
Pagination changes the quantity-based slice of one collection; Breadcrumbs expose hierarchy, while Stepper represents meaningful process stages.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Page list
The ordered set of available page destinations and range gaps.
Decision
Family question
Should this locate the page in a hierarchy, move across result pages, or show a process stage?
Three criteria to choose
- Use case
Pagination
Search results or collections need stable shareable pages
Stepper
A stable linear process has at least three meaningful sections
- Interactivity
Pagination
Uses real links, exposes the current page, and may condense distant ranges with noninteractive ellipses.
Stepper
Primarily communicates completed, current, and upcoming stages; a stage is interactive only when navigation is truly allowed.
- Accessible role
Pagination
nav[aria-label] > ul > li > a[aria-current=page]
Stepper
ol > li[aria-current=true] + heading
Nine dimensions
- Trigger
Pagination
Activating a page, Previous, or Next link loads another slice of one result set.
Stepper
The surrounding workflow advances or returns between meaningful process stages.
- Modality
Pagination
Non-modal navigation between document locations or result URLs.
Stepper
Non-modal progress context for a multi-step task; it does not block the current step.
- Placement
Pagination
Adjacent to the paginated collection, commonly after its current page of results.
Stepper
Near the workflow heading, ordered from the first stage to the final stage.
- Interactivity
Pagination
Uses real links, exposes the current page, and may condense distant ranges with noninteractive ellipses.
Stepper
Primarily communicates completed, current, and upcoming stages; a stage is interactive only when navigation is truly allowed.
- Focus
Pagination
Native navigation follows browser behavior; an in-place result update moves focus to the results heading or announces the new page consistently.
Stepper
After an in-place stage change, focus the new step heading or use one documented equivalent; never focus a decorative segment.
- Dismissal
Pagination
Pagination is persistent navigation and is not dismissible.
Stepper
The indicator is persistent workflow context and is not dismissible.
- Accessible role
Pagination
nav[aria-label] > ul > li > a[aria-current=page]
Stepper
ol > li[aria-current=true] + heading
- Use case
Pagination
Search results or collections need stable shareable pages
Stepper
A stable linear process has at least three meaningful sections
- Mobile behavior
Pagination
Prioritize Previous and Next, keep targets comfortable, and reduce visible page numbers instead of shrinking them.
Stepper
Keep a concise “step X of Y” heading and hide secondary labels before compressing the status beyond recognition.
| Dimension | PaginationPagination | StepperStepper |
|---|---|---|
| Trigger | Activating a page, Previous, or Next link loads another slice of one result set. | The surrounding workflow advances or returns between meaningful process stages. |
| Modality | Non-modal navigation between document locations or result URLs. | Non-modal progress context for a multi-step task; it does not block the current step. |
| Placement | Adjacent to the paginated collection, commonly after its current page of results. | Near the workflow heading, ordered from the first stage to the final stage. |
| Interactivity | Uses real links, exposes the current page, and may condense distant ranges with noninteractive ellipses. | Primarily communicates completed, current, and upcoming stages; a stage is interactive only when navigation is truly allowed. |
| Focus | Native navigation follows browser behavior; an in-place result update moves focus to the results heading or announces the new page consistently. | After an in-place stage change, focus the new step heading or use one documented equivalent; never focus a decorative segment. |
| Dismissal | Pagination is persistent navigation and is not dismissible. | The indicator is persistent workflow context and is not dismissible. |
| Accessible role | nav[aria-label] > ul > li > a[aria-current=page] | ol > li[aria-current=true] + heading |
| Use case | Search results or collections need stable shareable pages | A stable linear process has at least three meaningful sections |
| Mobile behavior | Prioritize Previous and Next, keep targets comfortable, and reduce visible page numbers instead of shrinking them. | Keep a concise “step X of Y” heading and hide secondary labels before compressing the status beyond recognition. |