• Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
  • Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
  • Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
  • * Breadcrumbs take up very little space on the page.

Breadcrumbs are almost always implemented the same way, with a horizontal line that

  • progresses from the highest level to the lowest, one step at a time;
  • starts with the homepage and ends with the current page;
  • has a simple text link for each level (except for the current page, because you should never have a link that does nothing); and
  • has a simple, one-character separator between the levels (usually “>”).

Hierarchy or History?

I’m sometimes asked whether website breadcrumbs should follow the fairytale model of Hansel and Gretel. In that story, the children walk through a bewildering forest, dropping breadcrumbs behind them in hopes that they might later find their way out.

In user interface design, it’s often dangerous to take metaphors too far, and breadcrumbs are again the perfect example. Offering users a Hansel-and-Gretel-style history trail is basically useless, because it simply duplicates functionality offered by the Back button, which is the Web’s second-most-used feature.

A history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confused progression at the top of the current page doesn’t offer much help.

Finally, a history trail is useless for users who arrive directly at a page deep within the site. This scenario is when breadcrumbs show their greatest usability benefit, but only if you implement them correctly — as a way to visualize the current page’s location in the site’s information architecture.

  • Breadcrumbs should show the site hierarchy, not the user’s history.