Skip to content
UX Atlas
Plate PAT·001 · PatternGrid F2 · Rev. 2026-09-14

Navigation

The structure that tells people what exists and where they are, which is an information architecture problem before it is a layout one.

PatternCraft conventionFoundational

Definition

Navigation exposes a product's structure and the user's position within it. Its quality is determined mostly by the labels and the grouping, both of which come from research rather than from layout decisions.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Patterns and where they fit
  3. 3What actually makes navigation work
  4. 4Keeping navigation navigable
  5. 5Diagnosing a findability complaint
  6. 6In practice
  7. 7Commonly confused with
  8. 8Local chart
  9. 9Continue from here

Reach for this when

  • Structuring a product or site.
  • Users report they cannot find features.
  • Adding a section that does not fit the current structure.
  • People can describe what they want and still cannot find where it lives.

Common mistakes

  • Labels invented internally.
  • More than seven top-level items.
  • Current location marked by colour alone.

Patterns and where they fit

PatternGood forCost
Horizontal top navFive to seven top-level areasDoes not scale past about seven items.
Sidebar navDeeper hierarchies, application shellsConsumes horizontal space.
Bottom tab barThree to five primary areas on mobileHard cap on item count.
Mega menuLarge cataloguesRequires careful keyboard and touch handling.
Hub and spokeTask-oriented mobile appsReturn trips to the hub between tasks.
Search-firstVery large content setsFails users who do not know the vocabulary.

What actually makes navigation work

  • Labels drawn from users' vocabulary, validated with tree testing rather than debated internally.
  • A visible current location, marked with more than colour.
  • Predictable behaviour: the logo returns home, back does what it should, links look like links.
  • Breadcrumbs for hierarchies more than two levels deep.
  • Full keyboard operability with a skip link to the main content.
  • Persistent access to search for anyone who cannot find the label.

Keeping navigation navigable

Do

  • Show where the reader is, on every page, in the navigation itself.
  • Keep the primary structure in the same place across the product.
  • Name items as readers describe them, and keep the old name as a search synonym after a rename.
  • Give search a place in the navigation, because some readers will always start there.

Do not

  • Hide primary navigation behind a menu icon on desktop.
  • Reorder items dynamically, which destroys the positions people have memorised.
  • Add a level to solve a naming problem.
  • Let a section exist in the navigation with nothing behind it.

Diagnosing a findability complaint

In order, because each step is cheaper than the one after it and most complaints are answered before the last.

  1. 1

    Read the search log

    Queries matching the names of navigation items mean people are searching for things they should be able to see.

  2. 2

    Tree test the labels alone

    No visual design, no layout. If the structure fails as plain text, no amount of layout work will save it.

  3. 3

    First-click test the real page

    Where people click first predicts task success better than any other single measure. A wrong first click rarely recovers.

  4. 4

    Fix labels before structure

    Renaming is cheap, reversible and usually enough. Reorganising is expensive and breaks the positions people have learned.

  5. 5

    Retest before shipping

    A second tree test on the proposed structure costs an afternoon and is the only evidence that the change is an improvement.

In practice

  1. i.

    Hidden navigation on mobile

    Responsive design

    Collapsing navigation into a hamburger reduces engagement with the items behind it. On mobile that is often an acceptable trade for screen space; on desktop it rarely is.

  2. ii.

    Search carrying navigation's load

    Reading the logs

    When the top search queries are the names of navigation items, people are searching for things they should be able to see. The fix is in the structure, not in the search engine.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Information Architecture

Research method

The organisation, labelling and relationships of a product's content.

Key difference

Information architecture is the structure: what exists, how it is grouped and what it is called. Navigation is one view onto that structure. A good menu cannot rescue a bad structure.

Use Navigation when

  • The structure is sound but people cannot move through it.
  • The question is which pattern suits the depth and the device.
  • The fix is presentation, hierarchy or persistence of the controls.

Use Information Architecture when

  • Things are in the wrong place, not merely hard to reach.
  • The same concept is called three names in three areas.
  • The fix changes what exists, not how it is displayed.

Learn about Information Architecture

Local chart

PAT·001 · Region III · Grid F2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Fitts's LawLAW·002 · PRINCIPLES BEHIND THISHick's LawLAW·001 · PRINCIPLES BEHIND THISJakob's LawLAW·003 · PRINCIPLES BEHIND THISSerial Position EffectLAW·008 · PRINCIPLES BEHIND THISSteering LawLAW·016 · PRINCIPLES BEHIND THISKeyboard NavigationA11Y·002 · DEPENDS ONBreadcrumbCMP·020 · OFTEN USED WITHDrawer and SheetCMP·011 · OFTEN USED WITHDropdownCMP·019 · OFTEN USED WITHLinkCMP·002 · OFTEN USED WITHMenuCMP·018 · OFTEN USED WITHTabsCMP·016 · OFTEN USED WITH

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Mobile AppNavigation

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Alternative approach

A different answer to the same problem, with a different cost.

  • Command PalettePAT·018 · Pattern

    A palette serves people who know what they want. Navigation serves people who do not yet.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.