Use Breadcrumbs to Improve Your Website’s Navigation

breadcrumbsalso known as a breadcrumb trail, are a secondary navigation system that shows a user’s location in a site or web app. The term came from the Hansel and Gretel fairy tale in which the main characters create a trail of breadcrumbs to track back to their house. Just like the children in the story, visitors need to know their location in a site’s hierarchical structure.

In this article, we’ll learn why breadcrumbs are so important, explore different types of breadcrumbs and discuss some best practices for applying breadcrumb trails to your website.

What Are Breadcrumbs and How Do They Help Navigate a Website?

Breadcrumbs, also known as a breadcrumb trail, are a secondary navigation system that shows a user’s location in a website or app. They act as a visual aid that indicates the user’s location within the site’s hierarchy and are a great source of contextual information for users that help them to find answers to where they are on the site and where they want to go.

More From Nick BabichDesigner-Developer Collaboration Sucks. Here’s How to Fix It.

Why Breadcrumb Navigation Is So Valuable

Breadcrumbs act as a visual aid that indicates the user’s location within the site’s hierarchy. Breadcrumb navigation is a great source of contextual information for users that help them to find answers to the following questions:

Where am I?

Breadcrumbs inform visitors of their current location in relation to the entire site hierarchy.

Where can I go?

Breadcrumbs improve the findability of content for website visitors. Users don’t need to click on the menu to find available navigation options; they see the site’s structure because it is laid out in breadcrumbs. As a result, breadcrumbs encourage browsing. For example, an e-commerce site visitor might land on a product page, and even if the first product isn’t a good match, the visitor might want to view other products from the same category.

Breadcrumbs also offer two other major benefits. First of all, they ttake-up minimal space. They’re a compact mechanism that takes a minimum amount of page space: just a row of text with links. As a result, it doesn’t introduce additional visual distractions to visitors. further, users are familiar with breadcrumbs. Breadcrumbs have existed from the very beginning of the internet, so people don’t have any trouble interacting with them.

When Should You Use Breadcrumbs?

To understand if your site would benefit from adding breadcrumbs, you first need to create a map that shows its navigation structure and then analyze it. Breadcrumbs can improve the user’s ability to navigate when you have a significant amount of content organized in a hierarchical manner (ie, multiple sections that can be divided into more subsections). A good example is an ecommerce site that offers a variety of products grouped into categories.

Avoid using breadcrumbs when you have a single-level website with no logical hierarchy or grouping. For example, breadcrumbs are unnecessary for a personal blog.

Breadcrumbs can be organized on the basis of location, path or attribute.

1. Location Based Breadcrumbs

Location-based breadcrumbs are the most common type. They represent a sites structure, and they help visitors understand and navigate your multilevel sites hierarchy. This type of breadcrumb is helpful for visitors who landed on your site from Google search results.

Image: Screenshot by the author.

In the example below from Best Buy’s website, each text link is for a page that is one level higher than the one on its right.

A screenshot of BestBuy.com
Image Screenshot by the author.

2. Path Based Breadcrumbs

Path-based breadcrumbs show the entire path the user went through on the website to reach a particular page. This type of breadcrumb is dynamically generated. Although path-based breadcrumbs can be helpful in specific contexts (ie, when the user needs to see their journey).

Most of the time, this type isn’t very useful because visitors tend to navigate from one page to another, and the trail they create can be very chaotic. When users want to go back to the previous pages they’ve visited, they tend to rely on the back button in their browsers. A path-based trail is useless for visitors who landed from the Google search results directly at a page deep within the site.

Below is an example of path-based breadcrumb links that show two paths to navigate to the target page.

A visual representation of path-based breadcrumbs
Image: Screenshot by the author.

3. Attribute-Based Breadcrumbs

Attribute-based breadcrumbs list the categories to the specific page or product. On e-commerce websites, this type can help visitors understand the difference between particular product variations.

Breadcrumb navigation on a website
Image: Screenshot by the author.

For example, on TM Lewin‘s site, breadcrumb trails show the attributes of the items displayed on a particular page:

A screenshot of TM Lewin's website.
Image: Screenshot by the author.

Breadcrumb Navigation Best Practices

When designing breadcrumb navigation, keep the following principles in mind:

1. Don’t use breadcrumbs as a replacement for primary navigation

Breadcrumb navigation is an extra feature that aids navigation, but it shouldn’t serve as a replacement for primary navigation menus. Think of breadcrumbs as an alternative way to navigate your website. Here, Apple uses breadcrumbs to support the main navigational tools.

A screenshot of breadcrumb navigation on an Apple webpage
Image: Screenshot by the author.

2. Don’t add left to the current page in breadcrumbs

The last item in the breadcrumb trail, which shows the users current location, is optional. If you want to display it, make sure its not clickable. Since users are already on the page, it doesn’tt make sense to add a link leading to the current page to the breadcrumb navigation.

3. Use clear visual separators between individual levels

The most recognizable symbol for separating links in breadcrumb trails is the greater than symbol (>). The > sign is the most conventional indicator that denotes hierarchy, as in the Parent category > Child category format. Other common symbols are arrows pointing to the right (→) and slashes (/ or //). The choice of visual separator depends on the aesthetics of the site and the type of breadcrumb.

4. Choose a proper visual style for breadcrumbs

You don’t want your breadcrumbs to dominate the page. They should be less prominent than the primary navigation menu. A rule of thumb to follow when sizing and styling your breadcrumb trail is that it shouldn’t be the first item that grabs the user’s attention when they country on a page. Lordthe Google Support page doesn’t make its breadcrumb navigation look fancy, but users can quickly locate and use it.

Google Support breadcrumbs
Image: Screenshot by the author.

More in Design + UXFrictionless UX Isn’t Always Better

Use Breadcrumbs to Help Users Find Their Paths

Good navigation experience is an integral property of good product design. Breadcrumbs enhance usability and make interaction with a website more comfortable because they make it easier for visitors to move around the site.

.

Leave a Comment