Breadcrumb navigation: how do visitors know where they are?

Separate hierarchy from browsing history

“Home → Catalogue → Lighting → Desk lamps” describes a relationship between pieces of content. The browser’s back button returns to a previous visit, which may have been on another website. Define a useful category relationship that still makes sense when someone arrives from a search engine, an email or a saved direct link.

Start with the content team, before drawing separators. Agree which category owns each product and use names customers understand rather than internal department codes. A tiny website with only one content level may gain little from a trail; additional navigation should solve an actual orientation problem.

Choose a consistent rule for multiple categories

The same lamp might appear in both “Home office” and “Lighting”. You could assign one primary category or explicitly preserve the category context the visitor selected. Either approach needs a sensible default for someone who opens the product URL directly. Do not leave this relationship to chance or to different editors’ personal preferences.

Update trails from the same content source when a category changes. Calling a group “Desk lamps” in the menu and “Office lights” in the trail can suggest that the visitor has moved somewhere different. Test long product names alongside category names, rather than reviewing only the shortest example.

Distinguish links, separators and the current page

Link the parent categories; the current page name does not need to be a link. A separator should not look like another action. W3C’s breadcrumb pattern places the trail in a labelled navigation region and exposes the state of a current-page link to assistive technology.

The main menu and the trail have different jobs. One introduces the site’s main areas, while the other gives nearby context. They can coexist. Even if a developer handles the technical implementation, the acceptance task remains straightforward: does selecting a parent category actually open the right group of content?

Try the relationship with real pages

Preserve meaning on a narrow screen

Do not force a long trail into one line by making the text tiny. Try wrapping, a deliberate treatment of intermediate levels, or emphasis on the closest parent category. If you collapse labels, design how people can recover the complete context. An unexplained ellipsis is not a complete navigation solution.

Use a phone and a keyboard to reach the parent category and choose another item. Resolve disagreements between the page heading and the final trail label. Our Gerhman project page provides catalogue-related portfolio context; the illustrative lamp is not part of that project. Include category naming, link targets and narrow-screen checks in the website design handover.