Back Link | LlamaPress Pattern Catalog
LlamaPress
Sign in Upload
Orient
Pattern

Back Link

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.

Orient

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.

Live demo — try it Open full screen
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.

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.

Instead of this, consider

Same problem, different trade-off. Pick on the condition, not on taste.

Breadcrumbs
When: There is a real containment hierarchy and ancestors are worth visiting.
Master–Detail Drawer
When: The parent list is worth keeping on screen instead of returning to.

Ask Leo for this

Paste this into your Leo chat. It describes the behaviour, not the code, so Leo can fit it to your data.

Prompt 
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

Pattern
Orientation
The principle — a screen with no exit is a dead end.