Breadcrumbs
A documentation site gets the same message in support every week. Somebody has read one page and wants the rest of the section, and they cannot find it.
Help people find their way, while you find yours home. A short listen for the road.
Listen to the full Breadcrumbs course on DesignPath
They arrived from a search result, four levels deep, on a page that names its own subject and nothing around it. The primary menu at the top lists six product areas, none of which tells them which one they are inside. The route they take instead is the browser's back button, which returns them to the search engine.
A breadcrumb answers that in one row. It makes three promises while it does so. Every ancestor in the trail is somewhere you can go. The separator says that the thing on the left contains the thing on the right. And the last item says you are here.
Every problem in this module is one of those three promises being broken, usually by a small styling decision that nobody thought was a navigation decision.
Anatomy of a Breadcrumb
A trail on a retail site reads Home › Laptops › Gaming Laptops › ROG Strix G16. Four items, three separators, one of them not a link.
Each of those decisions has a name and a reason, and a team that cannot name the parts argues about the styling instead.
The Parts of the Trail
Six pieces, and most trails use four of them.
The root, almost always Home, which sets the top of the structure. The ancestors, one per level between the root and this page. The current item, which sits last. The separator between each pair. The overflow control for when the trail stops fitting, which article 6 covers. And an optional sibling dropdown attached to a node, which is article 7.
Three Kinds, Named In 2002
Keith Instone catalogued the three in a poster at the Information Architecture Summit in March 2002, and the names have held since.
A location trail shows where the page sits in the site's structure. It is the same for everybody and it does not change between visits. A path trail shows the route this particular person walked to arrive. It is different per session and grows as they browse. An attribute trail shows the properties that selected the page, which is what a set of applied facets produces.
Which One to Build
Location, in almost every case, which is also the Nielsen Norman Group's rule.
A path trail repeats what the browser already does, and Back Button covers that job properly. It also gets long, it disagrees with itself between two visits, and two people describing the same page describe it differently. Attribute trails have one real home in faceted results, and article 5 covers the case where they fit.
What the Parts Promise
Three promises, one per part, and the rest of this module defends them.
Every ancestor is somewhere you can go, which makes an unclickable ancestor a broken promise rather than a styling choice. The separator says containment, so its direction carries meaning. And the current item says you are here, which is why it is the one thing in the row that leads nowhere.
Pro tip: Write your trail out as a line of text before designing it, for the deepest page you have. If you cannot say which kind it is, it is a path trail, because location trails come from a structure somebody already decided.