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

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?

 

Additional benefits of breadcrumbs

Examples