Behavior comparison
Breadcrumbs vs Pagination
Decisive difference
Breadcrumbs move up a hierarchy of parent pages; Pagination moves sideways between peer slices of one collection.
Choice criteria, links and sources
- BreadcrumbsChoose Breadcrumbs if the current page has ancestors the user may want to return to.Open entry Breadcrumbs
- PaginationChoose Pagination if one long list or result set is split into stable, shareable pages.Open entry Pagination
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?
Breadcrumbs
Shared trial context
Breadcrumbs
Mission
Breadcrumbs
Focus the Settings ancestor, activate it, and verify the destination replaces the current Billing location.
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
- Current Billing is exposed separately from the ancestor links.
- Edge case
- Long localized labels wrap or collapse without turning separators into controls or losing accessible names.
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.
What this example shows
Breadcrumbs expose the current page’s ancestry; Pagination moves among quantity-split peer pages, while Stepper tracks meaningful process stages.
Which fits your need?
Breadcrumbs
Pages belong to a hierarchy several levels deep
Pagination
Search results or collections need stable shareable pages
Difference and sources
Breadcrumbs expose the current page’s ancestry; Pagination moves among quantity-split peer pages, while Stepper tracks 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.
Trail
The ordered sequence that communicates the surrounding hierarchy.
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
Breadcrumbs
Pages belong to a hierarchy several levels deep
Pagination
Search results or collections need stable shareable pages
- Interactivity
Breadcrumbs
Ancestor items are links; the current page is identified and is usually plain text.
Pagination
Uses real links, exposes the current page, and may condense distant ranges with noninteractive ellipses.
- Accessible role
Breadcrumbs
nav[aria-label] > ol > li > a[aria-current=page]
Pagination
nav[aria-label] > ul > li > a[aria-current=page]
Nine dimensions
- Trigger
Breadcrumbs
Following a named ancestor link moves upward in the current hierarchy.
Pagination
Activating a page, Previous, or Next link loads another slice of one result set.
- Modality
Breadcrumbs
Non-modal navigation; the current page remains fully available.
Pagination
Non-modal navigation between document locations or result URLs.
- Placement
Breadcrumbs
A compact trail before the main heading, ordered from root to current page.
Pagination
Adjacent to the paginated collection, commonly after its current page of results.
- Interactivity
Breadcrumbs
Ancestor items are links; the current page is identified and is usually plain text.
Pagination
Uses real links, exposes the current page, and may condense distant ranges with noninteractive ellipses.
- Focus
Breadcrumbs
Visible focus remains on each ancestor link until navigation; a plain-text current page is not an extra tab stop.
Pagination
Native navigation follows browser behavior; an in-place result update moves focus to the results heading or announces the new page consistently.
- Dismissal
Breadcrumbs
Breadcrumbs are persistent navigation and are not dismissible.
Pagination
Pagination is persistent navigation and is not dismissible.
- Accessible role
Breadcrumbs
nav[aria-label] > ol > li > a[aria-current=page]
Pagination
nav[aria-label] > ul > li > a[aria-current=page]
- Use case
Breadcrumbs
Pages belong to a hierarchy several levels deep
Pagination
Search results or collections need stable shareable pages
- Mobile behavior
Breadcrumbs
Preserve the current location and nearest ancestor without making essential hierarchy depend on horizontal scrolling.
Pagination
Prioritize Previous and Next, keep targets comfortable, and reduce visible page numbers instead of shrinking them.
| Dimension | BreadcrumbsBreadcrumbs | PaginationPagination |
|---|---|---|
| Trigger | Following a named ancestor link moves upward in the current hierarchy. | Activating a page, Previous, or Next link loads another slice of one result set. |
| Modality | Non-modal navigation; the current page remains fully available. | Non-modal navigation between document locations or result URLs. |
| Placement | A compact trail before the main heading, ordered from root to current page. | Adjacent to the paginated collection, commonly after its current page of results. |
| Interactivity | Ancestor items are links; the current page is identified and is usually plain text. | Uses real links, exposes the current page, and may condense distant ranges with noninteractive ellipses. |
| Focus | Visible focus remains on each ancestor link until navigation; a plain-text current page is not an extra tab stop. | Native navigation follows browser behavior; an in-place result update moves focus to the results heading or announces the new page consistently. |
| Dismissal | Breadcrumbs are persistent navigation and are not dismissible. | Pagination is persistent navigation and is not dismissible. |
| Accessible role | nav[aria-label] > ol > li > a[aria-current=page] | nav[aria-label] > ul > li > a[aria-current=page] |
| Use case | Pages belong to a hierarchy several levels deep | Search results or collections need stable shareable pages |
| Mobile behavior | Preserve the current location and nearest ancestor without making essential hierarchy depend on horizontal scrolling. | Prioritize Previous and Next, keep targets comfortable, and reduce visible page numbers instead of shrinking them. |