Breadcrumb

In a product more than three levels deep, people land in the middle all the time. Arriving through a search result or a link from a colleague skips the front page, so there's no way to tell which branch the document being read belongs to. The browser's back button reports the path travelled and says nothing about what sits above in the structure.

Pagedeck's help center made the difference visible. The participant Noa watched pressed back from a document reached through search, hoping to find other articles on the same topic, and landed on the search results. After three rounds of that they closed the window. What they needed wasn't the previous screen but the parent topic this document hangs under.

A breadcrumb records the position in the structure instead of the route taken. The same path appears no matter how someone arrived, and each item in it is a door upward.

Lay out the path from the top level to the current screen on one line. Six things get decided.

1. Pick one separator. Chevron or slash, it has to be the same across the product.
2. The last item is the current location, so it isn't a link. A link that leads to the same screen gives people a reason to click and returns nothing.
3. Keep it to three to five items. Deeper than that, collapse the middle into an ellipsis and leave the top level and the immediate parent.
4. Write the structure, not the order visited. Someone arriving by search and someone arriving from a list have to see the same line, or the element stops reporting position.
5. Fix the placement above the title, aligned left. If it moves between screens, people stop looking for it.
6. On narrow screens, don't let it wrap to two lines — keep only the last item or two. At widths where a vertical sidebar collapses, this line can be the only device reporting location.

"This screen is three levels deep, so it needs a breadcrumb. Back alone won't get anyone upward."

Returning to the previous screen and moving up a level are two different operations.

"Don't link the last item. That's the screen they're already on."

Separating current location from destinations within one line.

"The path was built from the order the user visited. It has to be the position in the structure."

This element is a map, not a log.

After Noa added the line to the help screens, navigation up to parent topics increased and repeat searches for the same term dropped. People who had been re-searching to find a document started going up one level and picking from the list instead.