{"slug":"back-link","meta":{"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.\n\n- Name the destination: \"Back to invoices\", not \"Back\". A bare arrow makes\n  people guess where it goes.\n- Point it at the parent collection by a real URL, not at browser history, so\n  it behaves the same for someone who arrived from a bookmark.\n- Preserve the list's state when returning — the filters, sort order, page and\n  scroll position the person left. Carry them in the URL.\n- Put it above the page title, not beside the primary action, so it is never\n  confused with a cancel button.\n- Keep the browser Back button working too. The link is an addition, not a\n  replacement.\n","related":[{"title":"Orientation","url":"/patterns/orientation","summary":"The principle — a screen with no exit is a dead end."}]},"body":"## Anatomy\n\n```\n← Back to invoices          ← names the destination, is a real URL\n─────────────────────────\nINVOICE #1043\nRiverside Fit-Out Ltd\n```\n\nSmall pattern, three obligations:\n\n- **Name the destination.** \"Back\" alone is a guess; \"Back to invoices\" is an\n  answer. The arrow is decoration on top of the word, not a replacement for it.\n- **Be a URL, not history.** `history.back()` behaves differently for someone\n  who arrived from a link, and differently again after a form redirect.\n- **Restore the state.** Returning to a list that has forgotten the filters is\n  most of the way to not having a back link at all.\n\n## Why it works\n\nIt removes the one question a leaf screen cannot otherwise answer — *how do I\nget out of here* — without spending the space a breadcrumb trail would need for\na hierarchy that does not exist.\n\nThe state restoration is the part that earns its keep. Someone working a\nfiltered, sorted list is holding a position in a queue. A back link that drops\nthem at an unfiltered page one has technically navigated and practically\nundone their work.\n\n## Getting it wrong\n\n- **A bare arrow.** Cheap to draw, and now every user tests it once to learn\n  where it goes.\n- **`history.back()`.** Works in the demo, fails for bookmarks, deep links, and\n  anyone who arrived after a redirect.\n- **Losing the filters.** The most common version of this failure, and the most\n  annoying, because the person has to rebuild the view they were using.\n- **Placing it next to the primary action**, where it reads as Cancel.\n\n## Exemplars\n\n**Stripe** uses a named back link on detail screens and restores the list's\nfilters, so working through a filtered set of payments is a loop rather than a\nseries of round trips.\n\n**iOS** made the named back link a platform convention — the button carries the\nprevious screen's title — which is the clearest large-scale demonstration that\nnaming the destination is worth the pixels.\n\nThe extractable rule: **a back link is a promise to restore a position, not just\na URL.** If it cannot keep that promise, consider keeping the list on screen\ninstead with a [drawer](/patterns/master-detail-drawer).\n"}