UX Patterns Guide
Back to compare picker

Back link vs Breadcrumbs vs Pagination

Prefer a Back link when the page is part of a multi-page transaction and users need to return to the previous service page.

Back link live exampleBreadcrumbs live examplePagination live example

Decision dimensions

Dimension Back linkBreadcrumbsPagination
UI or UX UI + UX - Single previous-page return link for a transactionUI + UX - Hierarchy orientation navigationUI + UX - Paged navigation control
UI guidance Render one unobtrusive Back link near the top-left of a transaction page, before the main content, with a destination that returns to the previous service page.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.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.
UX guidance Use Back links to help users safely move one step back in a multi-page transaction without relying on browser history or losing previously entered information.Orient users who arrive deep in a site by exposing the canonical parent-child relationship for the current page.Help users move through an ordered result set with a stable sense of position, progress, and returnability.
Good UI A question page shows a single 'Back' link above the H1, before the form, and the Continue button remains the only primary action after the fields.Home, Projects, Migration, and Runbook appear in hierarchy order with ancestor links and Runbook marked current.Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear.
Bad UI A page shows Back, breadcrumbs, a previous button, and pagination controls at the same time.Recent clicks are displayed as if they were the page hierarchy.Tiny numbers with no current state.
Good UX A user goes back from Review answers to Contact details and sees the email address and phone number they already entered.Opening a saved deep link still shows the same parent path and lets users jump to Migration or Projects.Users move through pages while query, filters, and sort persist.
Bad UX Clicking Back returns to the browser's previous marketing page instead of the last service page.The breadcrumb changes after every click, so the same page shows different trails for different users.Changing page resets filters.
Best fit A multi-page transaction or form asks users one thing per page.Pages sit inside a clear parent-child hierarchy.The collection has many ordered results.
Avoid when The page is an informational content page with a stable hierarchy.The app has a flat structure with no meaningful parent levels.Users need uninterrupted reading or comparison.
Required state Default transaction page with one Back link before main content.Interior page with full ancestor trail.First page with disabled previous control.
Accessibility burden Keep the Back link in a predictable reading order before main content, so skip links can bypass repeated navigation.Place the trail in a labeled nav element.Use a labeled navigation region.
Common misuse Using Back as a breadcrumb or parent-category link.Showing browsing history instead of hierarchy.Using pagination for a tiny collection.

Back link

UI or UX
UI + UX - Single previous-page return link for a transaction
UI guidance
Render one unobtrusive Back link near the top-left of a transaction page, before the main content, with a destination that returns to the previous service page.
UX guidance
Use Back links to help users safely move one step back in a multi-page transaction without relying on browser history or losing previously entered information.
Good UI
A question page shows a single 'Back' link above the H1, before the form, and the Continue button remains the only primary action after the fields.
Bad UI
A page shows Back, breadcrumbs, a previous button, and pagination controls at the same time.
Good UX
A user goes back from Review answers to Contact details and sees the email address and phone number they already entered.
Bad UX
Clicking Back returns to the browser's previous marketing page instead of the last service page.
Best fit
A multi-page transaction or form asks users one thing per page.
Avoid when
The page is an informational content page with a stable hierarchy.
Required state
Default transaction page with one Back link before main content.
Accessibility burden
Keep the Back link in a predictable reading order before main content, so skip links can bypass repeated navigation.
Common misuse
Using Back as a breadcrumb or parent-category link.

Breadcrumbs

UI or UX
UI + UX - Hierarchy orientation navigation
UI guidance
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.
UX guidance
Orient users who arrive deep in a site by exposing the canonical parent-child relationship for the current page.
Good UI
Home, Projects, Migration, and Runbook appear in hierarchy order with ancestor links and Runbook marked current.
Bad UI
Recent clicks are displayed as if they were the page hierarchy.
Good UX
Opening a saved deep link still shows the same parent path and lets users jump to Migration or Projects.
Bad UX
The breadcrumb changes after every click, so the same page shows different trails for different users.
Best fit
Pages sit inside a clear parent-child hierarchy.
Avoid when
The app has a flat structure with no meaningful parent levels.
Required state
Interior page with full ancestor trail.
Accessibility burden
Place the trail in a labeled nav element.
Common misuse
Showing browsing history instead of hierarchy.

Pagination

UI or UX
UI + UX - Paged navigation control
UI guidance
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.
UX guidance
Help users move through an ordered result set with a stable sense of position, progress, and returnability.
Good UI
Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear.
Bad UI
Tiny numbers with no current state.
Good UX
Users move through pages while query, filters, and sort persist.
Bad UX
Changing page resets filters.
Best fit
The collection has many ordered results.
Avoid when
Users need uninterrupted reading or comparison.
Required state
First page with disabled previous control.
Accessibility burden
Use a labeled navigation region.
Common misuse
Using pagination for a tiny collection.
Decision rules
  • Prefer a Back link when the page is part of a multi-page transaction and users need to return to the previous service page.
  • Prefer breadcrumbs when the page belongs to a stable parent-child hierarchy and users need orientation or upward movement, regardless of how they arrived.
  • Prefer pagination when users are traversing ordered slices of one collection and need current page, previous, next, range, and edge states.
  • Do not show Back links and breadcrumbs together; they answer different questions and can create conflicting destinations.
  • A Back link must restore the previous page in its last-seen valid state, while breadcrumbs should show the same trail for the same URL every time.
  • Do not implement Back as a blind browser-history call when the previous entry may be outside the service or unavailable without JavaScript.
  • Use target-specific Back text in branching transactions, but keep breadcrumb labels as destination names in the canonical hierarchy.
  • Render a Back control as a button only when it must post form state before returning; pagination and breadcrumb controls should remain navigation links.
  • Keep Back links before main content on transaction pages, breadcrumbs near the top of hierarchical content, and pagination next to the collection it controls.
  • If users need to revise a previous answer, use Back; if they need to jump to a parent section, use breadcrumbs; if they need the next result page, use pagination.
Inspect live examples
Back linkBreadcrumbsPagination
Failure modes
  • A Back link takes the user to an unrelated marketing or search page from browser history.
  • Breadcrumbs are generated from click history and behave like a Back link.
  • Pagination is used to move between unrelated form steps instead of ordered collection pages.
  • Back and breadcrumbs appear together and users cannot predict which one preserves progress.
  • Returning to the previous page clears answers and violates redundant-entry expectations.
  • The Back link is placed beside Continue and is mistaken for a secondary submit action.