Breadcrumb

Definition

A breadcrumb is a small trail that shows where the current screen sits inside the whole structure, laid out in a single line from the top level down to now — think "Home > Category > Detail." Each step is joined by a separator that reveals how deep the hierarchy goes, and the items in front are clickable so you can climb back up a level. The name comes from the fairy tale where breadcrumbs were dropped to avoid getting lost, and that is exactly the job here: it helps people retrace the path they came through and hop back up with almost no effort. It sits right near the page title at the top of the screen, so it catches your eye naturally the moment the page opens.

Why does it matter?

In deeply nested places like shopping sites or documentation, it is easy to lose track of where you are after clicking through a few links. A breadcrumb keeps showing your current spot as a path, so you get that sense of direction back. Because of it, people can jump straight to the level they want in one click instead of hitting the back button over and over, which makes browsing feel much lighter. Resting quietly as a single line at the top, it takes up almost no space while still quietly hinting at the site's overall structure. That said, all of these upsides only matter when the hierarchy is genuinely deep — in a shallow structure a breadcrumb just becomes clutter.

Common mistakes

• Making the last item — your current location — a working link. A link that just reloads the very page you are already on is meaningless; it confuses people and leaves the impression that clicking did nothing. The last item should stay as plain text marking the current state, not a link.
• Adding a breadcrumb to a shallow structure that is only one or two levels deep. When there is barely anywhere to climb back to, the path display adds visual noise instead of information and ends up as decoration you would be better off without.
• Treating a breadcrumb like a back button and listing pages in the order they were visited. A breadcrumb shows the site's fixed hierarchy, not the actual history of where a user has been. Mixing the two makes the path change every time and only adds confusion.

Practical tips

• Since the last item is your current location, leave it as plain text rather than a link, and let only the higher items in front be clickable to move up. If the screen is shallow, skipping the breadcrumb altogether is the better call.
• Use a directional separator like an arrow or a slash, and keep it consistent. When it is clear that left means up and right means down, people read the path intuitively and never wonder which side to click to climb higher.
• If a path gets very long, collapse the middle steps into an ellipsis so only the start and the area near the current page stay visible. It fits neatly on one line while still expanding to reveal the full hierarchy when needed.

Related concepts