If you haven’t read the first part of this series, I strongly recommend you do so first and then get back to this article. The first part comes with some general guidelines you should keep in mind, while from this article on we will discuss some more specific tips. This article will be on the use of breadcrumb navigation.

What is a breadcrumb?

Breadcrumbs from a web design perspective are the series of links that tell you where you are on a page and the folder structure (i.e. Main category > Subcategory > Product name). On sites with lots of pages and a clear structure, breadcrumbs can consistently enhance the way visitors find their way around.

The term comes from the Grimm Brothers’ fairy tale “Hansel and Gretel” where two little children drop breadcrumbs across a forest to trace their path back home. Just like in the tale, breadcrumbs in a web application offer users the possibility to track their path back to the point where they landed on your website.

Amazon’s take on implementing breadcrumbs is one of the most conservative yet widely used ones. The breadcrumbs are placed at the top of the page and each crumb except for the last one is clickable and points to the corresponding category.

What you can learn from this approach:

Be consistent

All crumbs should be named the same throughout all corresponding pages. Following the example above, don’t use “Computers and Accessories” on one page and “Computers & Accessories” on another. The crumb name should match the page title – you shouldn't name your crumb “Laptops” if the name of the page is “Notebooks”.

Aid navigation, don’t replace it

The sole purpose of the breadcrumbs structure is to let your visitors know where they are and should not be a substitute for navigation. For the sake of consistency, your navigation bars should be kept intact.

Don’t link to the current page

Based on the reasons above, it goes without saying that the last crumb should not be clickable. The last item is merely an indication of where you are within the site. Don’t link to the current page, not even for on-page SEO reasons – the added benefit is insignificant compared to the usability-wise confusions it creates.

Make the last crumb stand out

Since it’s not a link, common design knowledge says the last crumb should be of a different color (see the screen shot above). Don’t even underline it, an underlined phrase usually indicates a hyperlink.

An excellent place for using breadcrumb navigation is on e-commerce sites that have a hierarchical page structure. If your service is selling a wide variety of products grouped into logical categories, such navigation is recommended. On the other hand, you shouldn’t use it on single-level sites with less than than two levels of depth. A good way to assess if your site would benefit from a breadcrumb structure is to build a sitemap or a diagram representing your structure and then analyze if breadcrumb navigation would improve the users’ ability to navigate within and between categories.