UXPatterns.ai
"Where am I in this?"

Breadcrumbs

Also known as: breadcrumb trail, location breadcrumbs, path navigation

In 1 line: Show the path from the home page to the current page as a row of links, so people know where they are and can jump back up 1 or more levels.

NavigationClassicEstablishedWeb · DesktopUpdated 12 Oct 2026 · 4 min read
main nav staysyou are here1 click =1 level up
where it lives - a thin row under the main navigation, above the page title
View as Markdown
it starts with a problem

The problem

People land deep inside a large site - from search, a shared link or an ad - and do not know where they are in the structure. They want to see the bigger section, or go 2 levels up, without pressing Back 5 times or starting again from the home page.

Force: Orientation - "where am I?"Force: Fast escape upwardsForce: Little screen space
homelanded here from searchwhere am I???
the site structure is invisible - the person only sees the 1 page they landed on
so here is the fix

The solution

Place a single row of links near the top of the page that mirrors the site hierarchy: Home › Section › Sub-section › Current page. Every step except the current one is a link. The current page is plain text. Keep the row small and in the same place on every page, and never make it the only navigation.

flatten the pathHomeSectionSub-sectionThis pageeach step is a link - the last 1 is plain text
the trail is the tree's path from top to here, laid out in 1 line
don't just read it - use it

Try it

Home
try this:
  1. 1Click into a category, then jump back up using the trail.
  2. 2Every step is a link except the last - the page you are on.
  3. 3The trail shows where the page lives, not where you have been.
see the difference

Aim for, avoid

Aim for
where this page livesHomeMenShoesRed shoesplain text, not a linkevery step is one level up - and up only
3 levels of hierarchy, each one a level up from the next. Every step except the last is a link; the current page is plain text. The row sits under the main navigation, not instead of it.
Avoid
where this person has beenHomeShoesSocksShoesCartthe same page twicehistory already has a buttona path through a tree cannot visit one place twice
The same site, but the row records the pages the person visited, not where the page lives. History belongs to the Back button. Broken force: orientation.
look closer - point at a part

How it's built

HomeShoesRunningTrail runnerABCDevery step except the last is a link
On a small screen
only the parentA - 1 back linkswipeB - a row that scrolls
the reason underneath

Why it works

People find it easier to recognise where they are than to remember how they got there. A breadcrumb turns the invisible site structure into something you can see and point at, which lowers the mental load of navigation. Because it is small and always in the same place, it costs almost nothing when it is not needed.

Recognition over recallMental modelsJakob's law
know when to reach for it

When to use it

Use when

  • The site has 3 or more levels of hierarchy.
  • People arrive deep inside from search or shared links.
  • Content lives in 1 clear place in the tree.

Avoid when

  • The site is flat - 1 or 2 levels. The row adds noise, not help.
  • A single-task app or a checkout flow. Use a step indicator instead.
  • Content belongs to many parents - the trail would lie.
what can go wrong

Risks and accessibility

Risks and pitfalls

  • Using it as the only navigation - it cannot move sideways.
  • Mixing history and hierarchy in 1 row.
  • Tiny text and separators that are hard to tap on a phone.

Accessibility

  • Wrap it in nav aria-label="Breadcrumb" with an ordered list inside.
  • Separators are decoration - hide them from screen readers.
  • Keep 44 px tap targets on touch screens, even if the text is 14 px.
in the wild

Seen in

sketch - screenshot to come
Microsoft Learn (Microsoft), Oct 2026 - 3 levels - Learn › Azure › Storage - above the article title. The current page is left out of the trail; the title already names it.
drawing to come
GOV.UK (Government Digital Service), Oct 2026 - Home › Driving and transport above the page title, marked up as nav aria-label="Breadcrumb" around an ordered list - the markup recommended below.

Screenshots are cropped and credited to their owners for the purpose of teaching. Ask us to remove one.

the same question, asked in AI

"Where am I in this?"

Visible plan answers the question this pattern answers - for a conversation with an AI instead of a page. Learn them together and each makes the other easier.

BreadcrumbsNavigationVisible planAI · Agents and automation
See all 6 pairs
now, without scrolling up

Check yourself

?

A photo app has 2 screens: the gallery and 1 photo. The designer adds "Gallery › Photo" above every photo. Good idea?

pick 1 - the answer and the why appear here

References

  • van Welie, M. - Breadcrumbs, Patterns in Interaction Design (2001)
  • Tidwell, J., Brewer, C., Valencia, A. - Designing Interfaces, 3rd ed. (2019)
  • Nielsen Norman Group - Breadcrumbs: 11 design guidelines (2018, updated 2024)
keep going

Read next

Next in this familyFly-out menuReveal the next level under a menu item on hover or tap.being written
← PreviousMain navigationOr follow a pathStart here