---
title: Back Link
slug: back-link
kind: pattern
summary: A single explicit "back to where this came from" control on a leaf screen, so leaving does not depend on the browser's Back button or on remembering the route.
problem: >-
  A screen with no hierarchy above it still needs an exit. Without one, people
  use browser Back, which loses filters and scroll position, or worse, does
  nothing useful because the page was reached by a redirect.
family: [orient]
data_shape: [record]
principles: [orientation, friction]
interaction: [navigation]
density: low
complexity: low
status: stable
visibility: public
use_when:
  - The screen has exactly one sensible place to return to.
  - There is no real hierarchy to display, so breadcrumbs would be a trail of one.
  - The screen was reached from a list people were working through.
avoid_when:
  - The data is genuinely hierarchical and people want to jump two levels. Use breadcrumbs.
  - The screen is a top-level destination in the navigation. It is not "inside" anything.
  - There are several plausible places someone came from and you would have to guess.
alternatives:
  - slug: breadcrumbs
    when: There is a real containment hierarchy and ancestors are worth visiting.
  - slug: master-detail-drawer
    when: The parent list is worth keeping on screen instead of returning to.
ask_leo: |
  Put an explicit back link at the top left of this screen.

  - Name the destination: "Back to invoices", not "Back". A bare arrow makes
    people guess where it goes.
  - Point it at the parent collection by a real URL, not at browser history, so
    it behaves the same for someone who arrived from a bookmark.
  - Preserve the list's state when returning — the filters, sort order, page and
    scroll position the person left. Carry them in the URL.
  - Put it above the page title, not beside the primary action, so it is never
    confused with a cancel button.
  - Keep the browser Back button working too. The link is an addition, not a
    replacement.
related:
  - title: Orientation
    url: /patterns/orientation
    summary: The principle — a screen with no exit is a dead end.
---

## Anatomy

```
← Back to invoices          ← names the destination, is a real URL
─────────────────────────
INVOICE #1043
Riverside Fit-Out Ltd
```

Small pattern, three obligations:

- **Name the destination.** "Back" alone is a guess; "Back to invoices" is an
  answer. The arrow is decoration on top of the word, not a replacement for it.
- **Be a URL, not history.** `history.back()` behaves differently for someone
  who arrived from a link, and differently again after a form redirect.
- **Restore the state.** Returning to a list that has forgotten the filters is
  most of the way to not having a back link at all.

## Why it works

It removes the one question a leaf screen cannot otherwise answer — *how do I
get out of here* — without spending the space a breadcrumb trail would need for
a hierarchy that does not exist.

The state restoration is the part that earns its keep. Someone working a
filtered, sorted list is holding a position in a queue. A back link that drops
them at an unfiltered page one has technically navigated and practically
undone their work.

## Getting it wrong

- **A bare arrow.** Cheap to draw, and now every user tests it once to learn
  where it goes.
- **`history.back()`.** Works in the demo, fails for bookmarks, deep links, and
  anyone who arrived after a redirect.
- **Losing the filters.** The most common version of this failure, and the most
  annoying, because the person has to rebuild the view they were using.
- **Placing it next to the primary action**, where it reads as Cancel.

## Exemplars

**Stripe** uses a named back link on detail screens and restores the list's
filters, so working through a filtered set of payments is a loop rather than a
series of round trips.

**iOS** made the named back link a platform convention — the button carries the
previous screen's title — which is the clearest large-scale demonstration that
naming the destination is worth the pixels.

The extractable rule: **a back link is a promise to restore a position, not just
a URL.** If it cannot keep that promise, consider keeping the list on screen
instead with a [drawer](/patterns/master-detail-drawer).