Breadcrumbs

What Is Breadcrumb Navigation?

Typically, breadcrumb navigation is a text path displayed near the top of the page near the site menu or primary navigation. Depending on the type of breadcrumb, it can show users how the page they are on is categorized on the site or the path the user took to find it. 

For example, here’s what breadcrumb navigation looks like on Barnes & Noble’s website:

Breadcrumb navigation is what’s referred to as a “secondary navigation” on a site. Used effectively, breadcrumbs are valuable to both your site visitors and search engines.

Here are three breadcrumb navigation options: 

1. Hierarchy-based breadcrumbs
2. Path-based breadcrumbs
3. Attribute-based breadcrumbs 

Hierarchy-Based Breadcrumb Navigation

This breadcrumb (also referred to as “location-based breadcrumb navigation”) navigation option follows the architecture or “hierarchy” of your website, making it easy for users to anticipate and find related content. 

Consider this example from Target: 

As you can see from the example above, hierarchy-based breadcrumb trails start with the broadest top-level category (in this case, Target as a whole) and progresses through more specific, nested subcategories before arriving at the current page. If the user changes their mind, they can easily click on a broader category to find something else. 

Path-Based Breadcrumb Navigation

Path-based breadcrumbs (also called “history-based breadcrumbs”) are like the navigation version of the back button on your browser. They reflect the user’s unique path leading to their current page, though typically this path is not displayed in its entirety. This breadcrumb option can help make it easy for site visitors to return to search results, especially on ecommerce sites. 

Here is an example from Adidas: 

In the example above, Adidas uses a path-based breadcrumb (the “Back” link) to return the user to their search results page. As you can see, it also sits alongside the site’s location-based breadcrumbs. This way, users gain the advantages of both. 

Path-based breadcrumbs are often used on interactive pages, such as web forms, as they allow users to go back to the previous step while retaining all of the information they’ve already submitted. Users can then make changes to the submitted information if needed.

Attribute-Based Navigation

Attribute-based breadcrumbs display meta-information about a page or topic in a breadcrumb format. This can be useful when an item falls into multiple separate categories simultaneously, which can be difficult to display in a hierarchy. Attribute-based breadcrumbs are commonly found in ecommerce websites to filter product search results.

Here is an example from apparel retailer Old Navy: 

In the above example, the “filters” are actually attribute-based breadcrumbs. Each one relates to a separate, specific attribute of Old Navy’s clothing inventory. With the above string, a user can only see women’s tops that are size small, green, and loose-fitting. However, they could remove any of those filters, or even add more, without needing to move to a different category.

In this example, Old Navy’s website also combines attribute- and hierarchy-based navigation, so that users have the option of viewing an entire category (women’s tops), or filtering more precisely within that category.

Why Breadcrumbs Are Good for SEO

• Helping users & search engines understand how a site is organized 
• Appearing in search results — Google use breadcrumbs to help contextualize the content on your site and place it in more relevant search results.
• Increasing crawlability & reducing bounce rate — breadcrumbs make it easier for users to understand and navigate your site more easily, they can help reduce bounce rate. They also improve the crawlability of your site by creating internal links across pages and categories
• Enhanced functionality for browsing & search  — Attribute- and path-based navigation, especially in combination, can help users filter site content, meaning they can find the content they’re looking for more quickly and easily.

Tips for Effective Breadcrumb Navigation

• Only use breadcrumbs that make sense for your website — Breadcrumbs typically make the most sense if the structure of your content has more than two levels. Consider the type of content you’re providing on your site and how users are likely to get to it. In most cases, a hierarchy-based system will be the most effective option as it directly reflects how your content is organized
• Use breadcrumbs that meet your audience’s needs — ask the following questions:
  • What information is most important for your audience to be able to find?
  • Which pages are currently the most and least popular?
  • Which pages are the most and least accessible?
• Organize your breadcrumbs in a logical way — The majority of websites display their breadcrumbs in the top half of the page, generally directly underneath the primary navigation menu, or directly above the page content. Your needs may vary based on your website, what your customers expect, and what’s standard in your industry
• Keep breadcrumb design simple 
• Benchmark your breadcrumbs — perform a split-test before you finalize your breadcrumb option. This can help you catch and resolve any potential negative results before they have a major impact