What are Breadcrumbs & How Does It Ease Navigation? Explained with Examples

Haven’t we all been to a theme park and found ourselves lost trying to find the exit? We won’t accept it, but a teeny sapling of frustration is about to rear its head.

We look around desperately, ask a passerby and they point us to a map, which tells us where we are in the park.

Suddenly, you know where you are and where the entrance and the exit lie with reference to your position. Panic goes poof! And off we go woof woof!

In site navigation, breadcrumbs do something similar.

What are breadcrumbs?

A breadcrumb is a secondary navigation aid that improves customer experience by helping users understand their location on a website or mobile application. 

The term ‘breadcrumb’ or ‘breadcrumb trail’ is borrowed from the story of ‘Hansel and Gretel’ where the kids drop a trail of breadcrumbs to trace their way back home. 

Similarly, breadcrumb navigation is used to indicate the user’s journey along with their current location. A breadcrumb menu or trail usually appears in a horizontal line at the top of the user’s current page in the form of clickable links. 

To provide a clear representation of the user’s journey, each of these links is separated by a particular sign such as an arrow or the ‘greater than’ (>) symbol.     

The most popular breadcrumb navigation example was seen in Microsoft’s Windows Vista, following which the ‘breadcrumb trail’ became an essential feature in every Windows edition. 

Why do your visitors need breadcrumb navigation? 

One of the main reasons for using breadcrumb navigation is that it instantly shows the user’s location, while also providing a clear visual representation of the website’s hierarchy and orientation.

Since users often struggle to identify the overall structure of a website, a breadcrumb trail solves this challenge and allows them to easily navigate from a particular page to different parent pages. 

Apart from the primary navigation menus, it is crucial to have breadcrumb navigation as well so that users can easily find what they want and spend more time on your website. 

Types of breadcrumbs in website design

Location or Hierarchy-Based Breadcrumbs

Location-based breadcrumbs help a user go to a broader category (higher-level page) from the page they are on. 

Consider someone who is searching for a pair of desert shoes. They click on one of the Google search results and land on the product page of your e-commerce site. After going through the page, they want to explore some more options. 

How can the user now go back to the main category page (Men’s Shoes) or a sub-category page (Men’s Shoes – Desert Shoes)?

A hierarchy-based breadcrumb trail allows users to see their current location with respect to the other pages of your site. Moreover, this breadcrumb type also helps them to easily move to any one of these pages.

In the above image, you can see how Best Buy uses location-based breadcrumb navigation, making it easier for the user to jump to any of the relevant categories.

Path or history-based breadcrumbs

This breadcrumb path serves the same purpose as the browser back button, letting a user go back to a previous page they visited. 

This is quite useful, especially when the user has reached the product page after applying multiple filters on the category page.

With path-based breadcrumbs, the user can quickly jump to one of the previous pages in their journey, with all of their current selections intact.

The most common application of history-based breadcrumbs is the use of the ‘Back To Results’ link, as seen in the above example.

Attribute-based breadcrumbs

As the name suggests, attribute-based breadcrumbs simply show the attributes a user has selected on a particular page. 

These breadcrumb trails are often used by e-commerce platforms, where users are given the option to select product attributes and filter search results on a category page.

What are the benefits of using breadcrumb navigation?

Initially conceptualized as a simple navigation aid, breadcrumb navigation has slowly come to affect various aspects of a user’s online experience.

Let’s look at some of the most important benefits of using breadcrumbs on websites and applications.

Reduces bounce

If a user reaches a product page that they are not interested in, they will either leave the site or go back to the category page to start over. 

Breadcrumb trails encourage the user to start over instead of leaving the page. In a study conducted by Hull, S.S. (2004), it was found that users who received instructions to use breadcrumbs completed tasks much faster than users who received no such instructions. 

Also, if you have a complex site hierarchy with multiple categories and sections, a breadcrumb trail will make it easier for users to find the information they want.     

This improves the overall experience of the user and encourages them to spend more time on your website, reducing drop-offs and bounce rates.    

Improves findability

In simple terms, findability is all about making it easier for users to find information on your website. 

Using breadcrumbs can help improve findability as it allows your website users to easily navigate through different pages and find exactly what they are looking for. 

Findability also plays an important role in improving the overall user experience. 

Lowers anxiety

Breadcrumb navigation is known to reduce anxiety among users as it gives them a clear idea of a specific process. 

For instance, once you start a free trial of VWO, you are asked to set up your account, which involves a few mandatory steps. 

To avoid confusion and reduce user anxiety, VWO uses a breadcrumb trail to provide a clear indication of the number of steps involved in this process. 

It also allows users to go back to any of the previous steps whenever they want. This gives the user a clear idea about the commitment (time and effort) required to complete this process. 

Once a user initiates an attempt, a breadcrumb trail acts as a strong motivator to finish the process.  

Has little to no drawbacks

A breadcrumb trail takes up very little space on a page and has also remained fairly consistent in its appearance over the years.

This makes the trail instantly recognizable and therefore, offers maximum value to the users.

Should you use breadcrumbs?

Breadcrumbs never cause problems in user testing. Also, people pay attention to breadcrumbs only 30% of the time and when they do take notice, they offer instant navigational cues to the user.

Now that you know the benefits of breadcrumbs, let’s understand if you should use them on your website.

Even though there are no major drawbacks to using breadcrumb navigation, you still need to decide whether your website even needs it. 

Since breadcrumbs are meant to act as a navigational aid for websites having complex hierarchies or multiple categories, using them would not make sense if you have a simple site structure. 

In this case, using a breadcrumb trail does not offer any valuable benefit and can even confuse users. 

However, if you feel that breadcrumbs can make navigation easier for your users, then you should go ahead and use them. 

How to add breadcrumbs to your website?

Once you decide on using breadcrumbs, the next step is to implement schema markup. This part involves adding a separate code to your website with the aim to provide structured data to search engines. 

In other words, the breadcrumb schema markup allows search engines to understand your site’s hierarchy, which helps them display the breadcrumbs within the search results in an informative way.

Google gives you the option to add schema markup to the existing breadcrumb navigation on your website. You can use either JSON-LD, RDF, Microdata, or HTML to insert the breadcrumb schema, depending on the format you are using. 

Here’s an example of the schema markup for a single breadcrumb trail in HTML: 

In case you are using a Content Management System (CMS), Google recommends using a plugin that’s integrated with the CMS itself.

In the below image, you can see how Google breaks the URL and displays breadcrumbs in the search result itself. This is possible because the website has implemented schema markup. 

One of the major breadcrumb schema benefits is that users instantly understand your site’s structure which helps them make informed decisions. This improves your click-through rate and enhances the overall user experience. 

Explore A/B Testing Tools

How do breadcrumbs help in improving SEO?

Breadcrumbs help users understand the site architecture and also make it easier for them to find relevant information.

Moreover, breadcrumb schema markup helps Google crawl and index your pages more effectively. Apart from displaying a breadcrumb trail within Google search results, users are also shown rich snippets with additional information and context. 

A rich snippet is basically another type of search result that offers extra information in the form of clickable links. These snippets provide additional context in search results, which again helps in improving the click-through rate. 

In the above example, you can see additional information like ratings and votes displayed with the search result itself. Combined with reduced bounce rates and improved visibility, breadcrumb navigation ends up having a positive impact on your website’s SEO.

Breadcrumb navigation best practices

Before you go about adding breadcrumbs and implementing the breadcrumb schema, there are a few important pointers that you should keep in mind.

Let’s take a quick look at some best practices that will help you enjoy the benefits of breadcrumb navigation. 

Display the full breadcrumb trail

The main goal of a breadcrumb trail is to provide a clear representation of the user’s journey from a certain starting point right up to the current page. 

For this, you need to ensure that the breadcrumb trail displays the entire path and does not exclude any part of the journey.  

Start with the home page

A breadcrumb trail works best when it displays the user’s journey from one end to the other. 

Including the homepage in the trail and displaying the logical categories acts like a strong anchor giving a strong sense of orientation to the users.

This helps users easily retrace their journey and go back to any higher-level page.

Use ‘>’ as a separator between levels

Although it is not mandatory, the ‘greater than’ (>) symbol is commonly used as a separator in breadcrumb trails all over the internet. 

People are used to it and they instantly recognize what it represents. So, it only makes sense to use the same symbol on your website too. But, in case you want to experiment, try using colons (:) or arrows (->) in your breadcrumb trails.    

Put the breadcrumbs at the top

Breadcrumbs act as a secondary navigation scheme, which is why they need to appear at the top of the current page.

However, they should not replace your primary navigation menu. A good placement for breadcrumbs is just below the main navigation bar and above the page title.

Add some contrast

Even though it occupies very little space, you need to ensure the trail is easily visible so that users can take advantage of the navigation path.

Adding a contrasting color is a great best practice for breadcrumb navigation and helps the trail stand out among the other information on your page. 

Boldface the last item

Boldfacing the last item or the current page gives it prominence and tells the user ‘This is where you are currently’.

It is a great way to provide instant cues about the user’s current location and helps them navigate between the higher-level pages and lower-level pages.

Do not hyperlink the last item 

Why would you hyperlink a text that leads to the same page? It does not serve any purpose and can be extremely frustrating for the user. 

Instead, as mentioned before, it makes sense to only boldface the last item so that users know about their current location. 

Avoid using breadcrumbs on the homepage

The homepage is where your user’s journey starts. Using a secondary navigation scheme like breadcrumbs on this page would be extremely confusing for the user. 

Use full-page titles in breadcrumbs

Adding full-page titles in the breadcrumb link helps users understand where each of the hyperlinks will take them. In case you are dealing with long page titles, you can choose to truncate the title using ellipses (see image below). 

In such cases, it’s better to omit phrases such as ‘You are here’ to make space for the more important elements which are the page titles themselves.

Page URL should mirror the breadcrumb trail

The page URL gives users a clear idea about the site hierarchy. 

Mirroring the URL and breadcrumb link helps you avoid inconsistent messaging from both of these elements.

When should you not use breadcrumbs?

If your site contains only a few pages, without many levels of hierarchy, applying breadcrumb trails won’t be very useful.

Including breadcrumbs in this scenario is unnecessary and potentially confusing to the website visitor. Instead, stick to the primary navigation menu and optimize it so users can navigate your website with ease. 

5 best examples of breadcrumb navigation

Now that we’ve had a closer look at some breadcrumb navigation best practices, it’s time to see some real-life examples of breadcrumb navigation.

1. LinkedIn Courses

LinkedIn offers a variety of courses for users ranging from Team Management to Email Marketing. In the below image, you can see one of these course pages. 

LinkedIn uses simple hierarchy-based breadcrumbs to help users go back to any of the previous categories like ‘Business’ or ‘Professional Development’.  

2. Macy’s

In the below image, you can see how Macy’s uses breadcrumbs on its product page. 

Here, both location and history-based breadcrumbs are shown. So, if a user does not like the product they can quickly go back a page and choose another product.

3. Penn Foster

Another breadcrumb navigation example of hierarchy-based breadcrumbs can be seen on the website of Penn Foster, a for-profit online college.

With the help of hierarchy-based breadcrumbs, the website allows users to return to a higher-level category page without clicking the back button.

4. Flipkart

This is another example that uses two types of breadcrumbs simultaneously. In this image, you can see how e-commerce sites like Flipkart use breadcrumbs navigation.

Flipkart shows both path-based breadcrumbs and attribute-based breadcrumbs to help users quickly understand how they got here and what filters have already been applied.

5. Shopify

Breadcrumb navigation is often used on blogs and other content-related pages.

Here, you can see how Shopify uses hierarchy-based breadcrumbs on one of its blogs. This type of breadcrumb allows users to go back to the main landing page or home page. 

Breadcrumbs: Secondary in status, primary in value

Breadcrumbs have been around for more than a decade.

But they have never found much spotlight owing to their permanent status as a navigation bar that appears below the primary navigation menu. 

Despite their status, breadcrumb trails are a powerful element to improve user experience and boost engagement. From a business standpoint, it helps in both acquisition (think SEO) and conversion (eases on-site navigation).

So should you have breadcrumbs on your site? 

Look at your users and ask a simple question – will they benefit? I think that’s the only question worth asking, really.

Note: Some of the screenshots used in the blog belong to the author.

---

FAQs on Breadcrumbs