{"slug":"persistent-navigation","meta":{"title":"Persistent Navigation","slug":"persistent-navigation","kind":"pattern","summary":"A navigation surface that is present and identical on every screen, so \"where can I go\" never has to be answered by the page itself.","problem":"Without a fixed navigation surface, every screen has to solve wayfinding on its own. People fall back on the browser Back button, which means the app has stopped navigating for them, and any screen reached by a direct link becomes a dead end.","family":["orient"],"data_shape":["app"],"principles":["orientation","consistency","surface-dont-bury"],"interaction":["navigation"],"density":"low","complexity":"low","status":"stable","visibility":"public","use_when":["The app has more than about three destinations.","People arrive on inner pages from links, bookmarks or email.","Anyone will use the product more than once."],"avoid_when":["The product is a single focused task with one exit, such as a checkout or a signup wizard, where a nav is an invitation to abandon.","The screen is a full-canvas editor and the chrome would compete with the work. Even then, keep a way out."],"alternatives":[{"slug":"command-palette","when":"Expert users jump around constantly and a menu cannot hold everything they reach for."},{"slug":"breadcrumbs","when":"The structure is deep and hierarchical; breadcrumbs answer \"how did I get here\", nav answers \"where can I go\"."}],"ask_leo":"Give this app one persistent navigation bar, rendered from a single shared\nlayout so every page gets the same one.\n\n- Put the destinations in it ranked by how often people use them, most\n  frequent first. Rare things like settings and admin go in a menu at the end,\n  not in the main row.\n- Keep it to about seven top-level items. Past that it is a list to read, not\n  navigation.\n- Mark the current section visibly — a different weight and a colour or an\n  underline, not colour alone.\n- Make the product name or logo a link to the signed-in home.\n- Keep it in exactly the same place on every screen, including error and empty\n  pages.\n- On a narrow screen, collapse to a menu button, but leave the current section\n  name visible so the person still knows where they are.\n","related":[{"title":"UX Principles Guide for Building Web Software","url":"/wiki/ux-principles-for-web-software","summary":"The orientation principle this pattern exists to satisfy."},{"title":"Orientation","url":"/patterns/orientation","summary":"Where am I, how did I get here, where can I go next."}]},"body":"## Anatomy\n\n```\n┌──────────────────────────────────────────────────────────────┐\n│ ▤ Acme Ops   Jobs   Customers   Invoices   Reports    ⚙ ▾  │\n│              ═════                                           │\n└──────────────────────────────────────────────────────────────┘\n   ↑ home link  ↑ ranked by frequency        ↑ rare things pooled\n                ═ current section, marked with weight + rule\n```\n\nThree obligations, and the third is the one that gets dropped:\n\n1. **Identical placement on every screen**, including errors, empty states and\n   modals-turned-pages. A nav that moves is not persistent.\n2. **Ranked contents.** Order is a design decision, not the order features\n   shipped in.\n3. **A visible current state.** This is the cheapest orientation available and\n   the most commonly skipped. Without it the nav says where you *can* go but not\n   where you *are*.\n\n## Why it works\n\nIt converts wayfinding from a per-screen problem into a solved constant. Once a\nperson has learned the nav — which takes one session — every screen in the\nproduct inherits that learning for free. That is the highest-leverage\nconsistency in an application.\n\nIt also makes deep links safe. Someone landing on a record from an email is not\nstranded, because the same nav is there as on the home screen.\n\nThe ranking is where the real judgment sits, and it is the\n[surface, don't bury](/patterns/surface-dont-bury) principle applied to the top\nlevel: prominence equals frequency times importance. Depth for rarely-used\nthings is correct, not a bug.\n\n## Getting it wrong\n\n- **The org chart in the navbar.** Sections named after internal teams, so every\n  user has to learn your structure to find their task.\n- **Fourteen flat items.** Everything promoted, so nothing is.\n- **Current state by colour alone.** Fails in greyscale and for anyone who does\n  not perceive that hue difference. Add weight or a rule.\n- **A nav that hides on scroll and does not come back predictably.** Now\n  reaching it is a gesture people have to discover.\n\n## Exemplars\n\n**Linear** keeps a narrow, quiet sidebar that never moves and never competes,\nwith the current item marked by background rather than colour saturation. It\ndemonstrates that persistent does not have to mean prominent.\n\n**Stripe** shows the ranking done honestly: Payments, Balances, Customers at the\ntop level, and a genuinely large surface of configuration deliberately pooled\nunder Settings. Most products would have promoted several of those.\n\nThe extractable rule: **a navigation bar is a published ranking.** Whatever is\nin it, you are asserting people need often. If that assertion is not true, the\nbar is costing attention on every screen in the product.\n"}