Global navigation
Users revisit several top-level product or service areas.
- Type
- UI-UX
- Sources
- 3
- Trail checked
establishedPersistent top-level navigation shell
Test in lab 21 documented entries 1 anti-pattern check
Navigation And Wayfinding
Headers, breadcrumbs, tabs, side navigation, steps, local anchors, and return paths.
Browse all problem familiesLearn the family
How does a person know where they are and which route leads to the task?
Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.
Use this method
- Name the task and the starting page.
- Choose a route whose label predicts the destination.
- Show the current location and a useful return path.
- Observe people finding the destination from a realistic starting point.
Compare the outcome
Strong: A patient opens Appointments from the main navigation, sees Check in on the appointment page, and uses a breadcrumb to return to appointment details.
Weak: A patient opens Services, then Account, then Help while looking for check-in because each label appears equally plausible.
Try it: Trace one task across three pages and mark every point where the person chooses a route or checks their location.
Read these patterns first
- Global navigationUsers revisit several top-level product or service areas.
- BreadcrumbsPages sit inside a clear parent-child hierarchy.
- Back linkA multi-page transaction or form asks users one thing per page.
Complete study route · 21 entries
Work through the family in order
Begin with the core behavior, apply it in different contexts, then review cases that reveal the quality boundary. Open each entry for its decision rule, states, example, and source trail.
0 of 21 studies complete
Start this family →6 entries
Build the foundation
Learn the shared task and the core interaction choices.
Header / top app bar
A screen needs a current title plus back, close, menu, search, save, share, edit, or overflow actions.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedCurrent-view top bar with title, navigation affordance, actions, and overflow
Test in lab Breadcrumbs
Pages sit inside a clear parent-child hierarchy.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardHierarchy orientation navigation
Test in lab Back link
A multi-page transaction or form asks users one thing per page.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardSingle previous-page return link for a transaction
Test in lab Skip link
Pages include repeated navigation, headers, breadcrumbs, filters, or other content before the main content.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardKeyboard-visible bypass link to primary page content
Test in lab Related links
The current page has a few genuinely adjacent pages, services, programs, or resources users often need next.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardCurated onward links connected to the current content
Test in lab 14 entries
Apply the patterns
Choose a specialized form for the context and follow its complete behavior.
Service navigation
A named service is used repeatedly by some users.
- Type
- UI-UX
- Sources
- 3
- Trail checked
establishedService-scoped identity and navigation strip
Test in lab Side navigation
A product area has several related pages arranged in a visible hierarchy.
- Type
- UI-UX
- Sources
- 3
- Trail checked
establishedPersistent local hierarchy at the side of content
Test in lab Tabs
Users switch between sibling panels frequently.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardSection-switching component
Test in lab In-page anchor navigation
A long content page has several meaningful sections users may want to jump to.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardSame-page section jump links for long content
Test in lab Step navigation / step indicator
A linear form, application, checkout, or setup flow has three or more meaningful steps.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardLinear multistep task progress indicator
Test in lab Process list / step-by-step navigation
An end-to-end journey spans several pieces of guidance, service links, departments, or channels.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardEnd-to-end ordered journey guidance with linked tasks
Test in lab Pagination
The collection has many ordered results.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardPaged navigation control
Test in lab Bottom navigation
A compact mobile app has three to five high-frequency top-level destinations.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedPersistent mobile primary navigation
Test in lab Navigation drawer
A constrained app needs access to more destinations than fit in the visible navigation surface.
- Type
- UI-UX
- Sources
- 3
- Trail checked
establishedDismissible slide-in navigation sheet
Test in lab Mega menu
A top-level navigation section has many related child destinations.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardLarge grouped disclosure panel under top-level navigation
Test in lab Utility navigation
Users need persistent access to support, search, account, notifications, language, switching, or sign-out controls.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedPersistent utility controls separated from destination navigation
Test in lab Command palette
Users need to traverse a broad product surface quickly.
- Type
- UI-UX
- Sources
- 3
- Trail checked
establishedModal command surface
Test in lab Recently viewed
Users inspect multiple objects and often need to return to one they recently opened.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardAutomatic list of items the current user opened recently
Test in lab Carousel
A small set of peer slides must share one constrained display area.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardSequential slide viewer for a small peer content set
Test in lab 1 entries
Review the quality risks
Study failure cases and identify the better recovery route.
Pagination without current page
Use this anti-pattern to review result pages, data tables, search results, inboxes, catalogs, audit logs, resource lists, and generated pagination controls.
- Type
- UI-UX
- Sources
- 6
- Trail checked
anti-patternMissing pagination position anti-pattern
Test in lab Try another phrase
Try fewer words, clear the filter, or search across all pattern families.
Search all patterns