If you sit down with any website design and development team, you might discover that breadcrumb navigation isn’t their favourite experience. Most may even consider it a hassle that’s not worth it, meaning it’s often an overlooked factor in site usability.

But the fact is, breadcrumb navigation helps to increase site usability as opposed to degrading its value. It is one of the more popular methods of alternative navigation, allowing website users to recognize their hierarchy while reducing the number of steps required to reach a higher-level within the site.

But, first things first.

What is Breadcrumb Navigation?

Breadcrumb navigation is a set of contextual links that ease the navigation of a website. These links also present an SEO opportunity to make your site more search engine friendly. There are three different types of breadcrumb navigation. We have outlined each of them to help you understand breadcrumbs a little better.

Location based

Location based breadcrumbs inform the user where their current page stands in the hierarchy of a website. This means that users can easily see (and access) a broader category, considered as a higher-level page, from the current page. To elaborate, a certain product page would be considered as a lower-level page in the website hierarchy, the sub-category it’s under is slightly higher level, and the main category is a much higher level. You will find these type of breadcrumbs visible in websites where there are at least two levels of content. They begin with a link to the home page and end with the user’s current page.

The benefit of these location based breadcrumbs is that they encourage more browsing experiences and considerably reduce the bounce rate. Say, for example, an ecommerce website user lands on a product page. If the product isn’t up to the mark, they will look for more items for comparison or they might look for different items to purchase. A user can use the breadcrumb links to navigate effortlessly and view more options. With this in mind, location based breadcrumbs can improve site usability and promote content accessibility.

Take a look at this example from Best Buy. From the home page, you get to ‘cameras and camcorders’, and then ‘digital camera accessories’. There are several further levels and finally, you have the product page.

Path based

Also known as ‘history trail’, these breadcrumbs enable users to see the path they have taken to arrive at a given page. This means visitors can easily jump back to a previous page they have visited without losing track. You will find that this type of link is generated dynamically. Usability professionals do not recommend path based breadcrumbs for a number of reasons such as –

1. They replicate the functionality offered by the back button
2. They might confuse users who end up navigating to wrong sections of the website
3. History trails are not good for users who arrive directly at a web page that’s deep-seated within the website hierarchy, such as a product page.
4. They can duplicate content delivery to search engines, negatively impacting the website’s ranking.

Here’s an example of path based breadcrumbs to help you understand clearly:

Contact Us > About Us > Careers > Flipkart Stories > Press > Sell on Flipkart

Due to the various risks involved in using this type of breadcrumb, you actually won’t see a lot of websites using them anymore.

Attribute based

Attribute based breadcrumbs are most commonly found in ecommerce sites. They display the meta information of a certain page, which means visitors can see the different attributes or categories assigned to a certain page. A product may be listed under a certain category but it can be categorized under multiple other categories as well. For example, a car may be categorized as vintage, but it can also have different attributes such as being released in the 1960s, being a convertible, or being the color red.

Attribute based breadcrumb navigation doesn’t necessarily take you back to the path you have taken nor does it display the hierarchy of the website. Like the path based navigation, it also has issues with duplicate content delivery to search engines, but a highly qualified SEO expert can always prevent this from happening.

Here’s an example from Flipkart where you select a certain product and automatically see all the categories and attributes it may be listed under, such as “Books”, “Short Stories”, “Fiction and Non-Fiction”, “Literature and Fiction” etc. So the product page of the book itself is accessible via multiple paths.

So, why is breadcrumb navigation great for web usability?

#1. It allows easier navigation

Breadcrumbs can provide additional means through which website users can easily navigate. If a user lands on the internal page of a website via another breadcrumb they can see where they rank as per website hierarchy. Users also have the opportunity to move between different pages without any hassle.

#2. Finding content becomes easier

Location based breadcrumbs not only support better browsing but also improve search function. The location based breadcrumbs can be seen in search listings, offering multiple ways for users to navigate through a website. See this example from Nordstrom and the results that show up when conducting a Google search for stilettos with the brand name.

#3. Breadcrumbs make things visually pleasing

It’s not just about usability; breadcrumb navigation can also be responsible for making your website visually pleasing. Plus, it can do so without consuming too much space on your page. An aesthetically-pleasing website design often translates to better user experience. So not only will you find that breadcrumbs are easy to implement, they fit seamlessly into the design of your website and provide great benefit to your user. See how Jabong achieves this below.

#4. Lowers bounce rates

Breadcrumb navigation provides a more detailed method of navigating a website. In doing so, users will come across more options of how to reach other pages without getting lost. They have the opportunity to easily go back a number of levels within the site, preventing them from leaving because they’re confused with the navigation or are unable to find something. This means breadcrumb navigation can lower the bounce rate of your website significantly.

Wrapping Up

This simplified explanation of breadcrumb navigation should be able to help you understand it better and how it can be implemented to improve your site usability. Got any insights to share or any questions to ask? Feel free to leave a comment below.