Breadcrumb Navigation: a Guide to Types, Benefits and Best Practices

What are breadcrumbs? We are obviously not talking about dried bread particles used to coat fish sticks or chicken nuggets. Breadcrumbs in web design is used to facilitate navigation apart from the main navigation menu. It is a list of elements in the form of links separated by a character or graphic that are usually seen in sites that are many pages deep. So, if a site has a high bounce rate or high cart abandonment rates, the reason is usually due to confusing main navigation or a missing breadcrumb (secondary) navigation.

Take a look at a sample breadcrumb navigation screenshot below:

Breadcrumb navigation is generally inconspicuous compared to other clickable elements surrounding it, but they always seem to have a standard placement between the primary menu and the content. Breadcrumbs tell the site visitor about their location on the site. Since the element towards the extreme left in a breadcrumb trail are the higher category page or home page, a site visitor can always track back and start over their navigation for better findability of information. If you have a multi-category site or have a site with many inner pages you might want to consider the use of breadcrumb trail navigation.

Today we will be discussing about types of breadcrumb navigation, benefits of having a breadcrumb navigation and best practices of breadcrumb navigation. So, let's get going with the first topic of discussion.

Types Of Breadcrumb Navigation

Although all breadcrumbs in web design serve the same purpose of improving findability within the site, there are four types of breadcrumbs that is currently under use. One of them is extensively used than the others and the following list is in descending order of breadcrumb navigation type adoption by websites.

1. Location Breadcrumb Navigation

Like the name suggests this breadcrumb navigation tells you your location on a particular site. This type of navigation is the most extensively used by websites all over the web and is simple in structure. It displays the content hierarchy in a website and helps visitors easily go back to a higher-level category page with a single click.

This sort of breadcrumb navigation is extensively adopted by websites that have multi-level websites with systematically organized categories. The location breadcrumb is static and hence remains constant, no matter what.

2. Attribute Breadcrumb Navigation

The attribute breadcrumb, as the name suggests, describes each level of breadcrumb navigation category. It does not show you your location on the site but shows meta information about each page. Accessing this kind of a breadcrumb navigation does not necessarily take you back on the path you came from within the site navigation.

For instance, cars.com uses the attribute breadcrumb navigation that tells the attribute of each page in the breadcrumb trail.

You can try choosing a path from the homepage and you will see that at a certain point the breadcrumb trail changes to attributes of each page rather than displaying the location from where you started.

Some sites such as Overstock, use attribute breadcrumb navigation with filtering options for the users.

Attribute navigation could include keywords to gain on page SEO benefits, but since it does not go show you your location on the website in order to trace back on your browsing path, it may cause usability issues.

Another drawback with attribute breadcrumb is a certain page can appear both in an attribute breadcrumb navigation or in a category-based navigation, thus creating duplicate content. This type of breadcrumb navigation is sometimes seen on e-commerce sites.

3. Path Breadcrumb Navigtaion

The path breadcrumb navigation tells you the path taken to reach a certain page. And as certain pages can be accessed using multiple paths, this also cause unnecessary duplicate content issues.

This type of breadcrumb is generated dynamically based on the path chosen to find a particular page. When a user visits an inner page directly from a search engine, the path suggested may not take them to the right higher-level page on the site, they were hoping to visit.

Following is a sample representation of a path breadcrumb navigation.

• Home > Kids > Clothing > Girls Clothing
• Home > Brands > Kids Shop > Girls Clothing
• Home > Designers > Kids > Girls Clothing

4. Title Breadcrumb Navigation

This type of breadcrumb navigation is one of the rarest and even the sites that once used it have stopped using it now. This breadcrumb navigation is seen on the title tag of the website.

This type of breadcrumb navigation was probably used to enhance on page SEO but it has absolutely no usability value and hence is a discontinued practice.

These were the four types of breadcrumb navigation that you needed to know. Now, let's look at reasons why having breadcrumb navigation is a MUST for your site.

Benefits Of Breadcrumb Navigation

There are many benefits of breadcrumb navigation and the list below will tell you why implementing this sort of secondary navigation makes a lot of sense for your multi-level website.

1. SEO:

Just as a sitemap tells search engines a whole lot about your website structure, a breadcrumb trail also helps in serving a similar purpose. The organization of your website content becomes clearer with a breadcrumb trail. Search engines like Google identify such secondary navigation trails and present better and accurate information about your pages in their search results.

Also, the words used in a breadcrumb trail can be your site's target keywords. These keywords in the breadcrumb navigation helps improve the keyword density of the page. The internal links on the breadcrumb navigation also give search engines more information about that page and the pages it is connected to.

Moreover, Google started displaying breadcrumbs in its search results, and even though it can get this feature for sites that do not have breadcrumbs implemented, having a breadcrumb navigation should assist the search engine better in displaying the breadcrumbs in search.

NOTE: Breadcrumbs are shown in Google search results only for a select keyword searches.

2. Usabilty:

Usability is close to being the primary benefit of having breadcrumb navigation on your site. Some people may overlook the breadcrumb navigation, however, those who know to use them have absolutely no problem browsing easily through the various pages of your site to find their desired information or product. Breadcrumb navigation improves findability thus helping users to complete their tasks faster.

3. Increase Time on Site:

When a search engine user enters a lower-level page on your website, with the help of a breadcrumb navigation they are encouraged to browse other higher-level pages of your site. Say, for instance, a user enters a search term for a Nikon D3200 camera and is taken to the product page on your site via a search result. The user may click on the DSLR Camera link in the breadcrumb navigation to check other options in the category. This reduces the bounce rate of your site considerably.

Take a look at a couple of screenshots below. A search for Nikon 3200 camera was made on Google search. The two product pages were obtained from the search results. The first one had no breadcrumb navigation. Hence, if the customer is not satisfied by the information on the page, they may leave the page, at once.

The second result, however, takes us to a page with a defined breadcrumb navigation. This may have the customers browse further into higher elements in the breadcrumb navigation, like DSLR cameras in this case, to find wider options and compare with their original choice.

4. Little Space Occupied:

They occupy the least space in a page with their inconspicuous font size. They do not cause any extra page load time issues.

These were the four major benefits of having a breadcrumb trail navigation on your website. As it has almost no drawbacks, it seems like it is a very easy decision to make for a website that is considering to incorporate breadcrumb navigation. And while you have decided to incorporate it, you must follow certain best practices and avoid making silly mistakes with your site's breadcrumbs. Let's list a few of those best practices below:

Best Practices For Breadcrumb Navigation:

1. Create a Sitemap:

If your site does not have a sitemap already, create a visual one like a family tree. This will give you a good idea for organizing your breadcrumb navigation within your site. If you find that most of the lower level pages of your site feature in multiple categories, you may want to skip the breadcrumb navigtaion. On the other hand, try to change the sitemap such that every page has it's own unique path and thus it becomes simpler to implement location breadcrumb navigation (the most preferred one of the lot).

2. Always A Secondary Navigation

Breadcrumb navigation is secondary navigation for your site. It is a horizontal line of linked elements. Some sites implement a fly-out menu on a breadcrumb element, which is generally a feature of the primary menu found on a conventional site design. Not sticking to conventions and experimenting with the functions of a breadcrumb may backfire on the usability of your site.

Following is the example which shows a fly-out menu from a breadcrumb element of 'About Us' rather than a primary menu that also contains an 'About Us'.

If you have user-tested your site for this feature with positive results, it is fine to have it. But our advice will be to keep the breadcrumb navigation simple and secondary and let the primary navigation have all the extra features of expanding into a vertical menu.

3. Remove Unecessary Elements

Some sites place unnecessary elements, that either describes the breadcrumb navigation or adds an extra functionality to the breadcrumb navigation. For instance, there is no need to add a 'You are here' before your breadcrumb navigation. Users may think it is a link and may waste their time clicking on it.

Conventionally, all the elements used in a breadcrumb trail are links and such misconceptions are bound to happen.

Similarly, some sites give a 'back' option along with the breadcrumb links. This may also create confusion among the users of your site as they would not know exactly what page the back link would take them to, that the breadcrumb elements may not. This is an unnecessary addition for a function that already exists in all the browsers, to which users are generally accustomed to.

There is no harm in having these elements, they definitely are not the cause of a high bounce rate. However, it is good to avoid anything that makes the user wonder about its function or repeat a function that already exists in browsers.

4. Always Above The Fold

This may seem as an obvious best practice since almost all sites have their breadcrumb navigation right below the primary navigation which is placed above the fold. There are some sites that place them in the footer and it is recommended to avoid doing so. This is purely for usability reasons and also for the fact that serving a distinguished design or content takes a longer time for a user to discover or use, as compared to the conventions they are generally used to.

5. Small Size

Make sure that the font size of the breadcrumb navigation elements is smaller to the ones present in the primary navigation. There must be clear distinction between both navigation.

Shown below is a sample screenshot of how breadcrumb navigation looks like when the font size is the same as in the primary menu.

6. Start with Homepage

This is one of the conventions when it comes to location breadcrumb navigation. Always start your breadcrumb trail with the home page and end with the current page. Some sites such as Walmart skip the home page and start the breadcrumb trail with a high category page.

Similar, is the case with target.com.

This may cause the visitor to look for other options to go back home, which is a result of poor usability. Attribute based breadcrumbs generally do not start with the home page, and if you have opted for one, just make sure the customer is shown a prominent way to go back to the home page.

7. Do Not Link Current Page To Itself

In a breadcrumb trail do not link the last element, which is the current page that the visitor is on, to itself. This type of linking is unnecessary. Even if the user ends up clicking it out of curiosity, they will find that they come back to the same page and it would be a waste of their time on the site.

8. Keyword Consistency

Keyword consistency is part of SEO best practice and since breadcrumbs can also play a tiny role in SEO, make sure you use the same keywords in breadcrumb anchor texts as the ones present in the page title and page URL.

9. Character Symbol Variations

The conventional character used to separate two breadcrumb navigation elements is the greater than sign '>'. But there are other variations in use which you can apply to your breadcrumb trail as well.

There are a number of characters used to break up the breadcrumb elements, including right angle brackets '>', slash '/' and the pipe '|'.

These were some of the best practices for implementing breadcrumb navigation on your website. Remember, only implement the breadcrumb navigation if it is useful to your site visitors.

If your site has multi-level pages and if you do think breadcrumbs will help your visitors in browsing around the site, it's time to start planning for creating the perfect breadcrumb navigation trails. Since, implementing them don't hurt the loading time of your site or the design, it really doesn't hurt to give your users access to the very useful secondary navigation system.

Do you have breadcrumb navigation on your site? Let us know your personal tips to enhance the usability of a site using breadcrumb navigation.