Breadcrumbs

Summary

Breadcrumbs are:

• an auxiliary means of navigation.
• help users understand where they are in context of the website or web application hierarchy

Types of breadcrumbs

There three often cited types of breadcrumbs are:

• Location-based breadcrumbs
• Path-based breadcrumbs
• Attribute-based breadcrumbs

The most prevalent one by far is location-based breadcrumbs, which is what you should implement too. It is the one described above in the summary. Path-based is analogous of Hansel’s and Gretel’s breadcrumbs. It’s a thing of the past. Browsers provide us with this function. Attribute-based breadcrumbs are also a thing of the past, mixing navigation facets into breadcrumbs themselves. Facetted navigation is best implemented on a page rather than mixing in with an auxiliary form of navigation like breadcrumbs.

Usage

• Breadcrumbs can be used on all pages besides the homepage.
• Every unit of the breadcrumb should be a link besides the last unit, which indicates the current page.

Special scenarios

When not every page group heading is a page itself

Ideally, category pages should exist down to the last level. You need them for breadcrumbs to work well. If your stakeholder asks why you need category pages, tell them they are needed to make breadcrumbs work besides providing users with a navigation page for better orientation while navigating. However, if category pages don’t exist down to the last level but exist as group headings (in places like mega menus, for example), then add them as units to the breadcrumbs. They will not be links because they don’t exist as category pages, but will help users get a good orientation of the hierarchy of items in the page, which will in turn help them be able to navigate better.

Yes, it’s true that it is not the standard implementation where every unit in the breadcrumb before the current page is expected to be a link, but what you could do is differentiate it from both the styling of links and current pages as shown below.

E.g.- Home > Furniture > Tables > Dining tables

In this example, let’s say Tables is a heading in the mega menu navigation to group pages for types of tables, but it is not a page itself.

Here’s an example of it on the Microsoft website.