Navigation out in the real world requires knowledge of your current position and the location of other places relative to your position. The web is no different. The visitors on your site need to know exactly where they are and where they could go from there.

Whenever people feel lost on the internet they just type Google’s URL into the address bar and restart their navigation either from Google or their browser’s homepage. But you don’t want them to do that. You want people to stay on your site as long as possible because the longer they stay, the higher the chances that they will buy something.

That’s where breadcrumbs come in. Borrowed from the fairy tale of Hansel and Gretel, this digital trail of crumbs allows users to retrace their steps from their current position all the way back to the start of their navigational journey.

There are two types of breadcrumbs:

Hierarchy/location based breadcrumbs
History based breadcrumbs

Hierarchy/Location based breadcrumbs

Hierarchy based breadcrumbs show a user’s current navigational path relative to the site’s nested categories and sub-categories. Take a fashion store for example. If Jonah is looking at a white dress shirt then his breadcrumbs would be:

Home > Clothes > Men > Formal > Shirts > Brioni Men’s White Cotton-Linen Dress Shirt

The arrows indicate category hierarchies by pointing towards sub-categories and sub-sub-categories.

History based breadcrumbs

History based breadcrumbs allow shoppers to take one step back. They’re just a more complicated version of the back button. They are used to indicate filtering and sorting options and as such can be used to return the state before those filters were applied.

How do you properly implement breadcrumbs?

Show both hierarchical and historical breadcrumbs.
Use ‘>’ as the separator.
Bold or otherwise emphasize the last term of breadcrumbs to indicate a shopper’s current location.
Place breadcrumbs above page content but below the navigation bar.
Use a small font on breadcrumbs to reduce competition with the navigation bar.
Use contrast to make sure breadcrumbs do not fade into the background.
Show the full path in hierarchy-based breadcrumbs.
Avoid breadcrumbs on the homepage. They’re unnecessary there.
Avoid hyperlinking the last breadcrumb. There is no point in reloading the same page.

Additional benefits of breadcrumbs

They’re great for SEO as Google uses breadcrumbs instead of URLs in its search results for nested pages.
They encourage browsing and reduce the bounce rate.