Breadcrumbs

When the current page appears in the breadcrumb, it should be the first thing the user reads. It gets the darkest label, while the earlier levels stay muted until hovered or focused. Those earlier levels are still direct routes back through the hierarchy; the user can press any one of them to go there. I like keeping that distinction in the text itself without adding a background around the current page.

The current page doesn’t always need a place in the breadcrumb. On a product page like Amazon’s, the product itself already makes the user’s location obvious. If they’re six levels deep, repeating the product name adds visual noise to an already long path. I’d leave it out and use the breadcrumb to show the categories the user can return to.

The back arrow takes the user up one level in the hierarchy. From Files, that means Shared, regardless of which page they visited before Files. Its destination should stay predictable from the path on screen.

When the full hierarchy is useful, long paths should keep their starting point and current page visible. Once there are more than three levels between them, the middle collapses into an ellipsis that the user can press to reveal the full path. I prefer expanding those names in place because the user can read each level in the context of the ones around it.

The expanded path should stay available while the user is choosing where to go. It remains open while the pointer is over the breadcrumb, then collapses two seconds after the pointer leaves. Moving back over it cancels the countdown. That delay gives the user a little room to move away and return without having to open it again.

Breadcrumbs describe a hierarchy, so they shouldn’t stand in for progress through a workflow. Account creation and long forms split across multiple screens need a stepper to show which stage the user is on and what’s still ahead. A sequence of tasks has a different meaning from a path through pages.

On mobile, I’d show just one level up: a back arrow and the parent’s name. From Shared, that means an arrow followed by John Lynn, both pointing the user back to that level. It gives the user a named destination without asking a narrow screen to hold the whole path.