Use breadcrumbs to improve your website navigation

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

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

What are breadcrumbs and how do they help navigate a website?

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

More Nick BabichThe designer-developer collaboration is nil. Here’s how to fix it.

Why breadcrumb navigation is so valuable

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

Where am I?

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

Where can I go?

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

Breadcrumbs also offer two other major benefits. First, they toccupy a minimum of space. It is a compact mechanism that takes up minimal space on the page: just a line of text with links. As a result, it does not introduce additional visual distractions for visitors. Moreover, yousers are familiar with breadcrumbs. Breadcrumbs have been around since the very beginning of the internet, so people have no trouble interacting with them.

When to use breadcrumbs?

To understand if your site would benefit from add breadcrumbs, you first need to create a map that shows its navigational structure and then analyze it. Breadcrumbs can improve the user’s ability to navigate when you have a important amount of content organized hierarchically (i.e. multiple sections that can be divided into multiple subsections). A good example is an e-commerce site that offers a variety of products grouped into categories.

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

Breadcrumbs can be organized by 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 site on many levelsthe hierarchy. This type of breadcrumb is useful for visitors who landed on your site from Google search results.

Image: Author’s screenshot.

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

A screenshot from BestBuy.com
Image Screenshot by author.

2. Path-Based Breadcrumb

Path-based breadcrumbs show the full path the user took through the website to reach a particular page. This type of breadcrumb is generated dynamically. Although path-based breadcrumbs can be useful in specific contexts (i.e. when the user needs to see their journey).

Most of the time, this type is not very useful because visitors tend to navigate from one page to another, and the path they create can be very chaotic. When users want to return to previous pages they have visited, they tend to rely on their browser’s back button. A path-based lead is useless for visitors who have landed from Google search results directly on a deep site page.

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

A visual representation of path-based breadcrumbs
Image: Author’s screenshot.

3. Attribute-Based Breadcrumbs

Attribute-based breadcrumbs list categories for a 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: Author’s screenshot.

For example, on TM Lewin‘s, breadcrumbs show the attributes of elements displayed on a particular page:

A screenshot of TM Lewin's website.
Image: Author’s screenshot.

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 additional feature that makes navigation easier, but it shouldn’t replace the main navigation menus. Think of breadcrumbs as a alternative way to browse your website. Here, Apple uses breadcrumbs to support major navigation tools.

A screenshot of breadcrumb navigation on an Apple webpage
Image: Author’s screenshot.

2. Don’t add links to the current page in breadcrumb

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

3. Use clear visual dividers between individual levels

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

4. Choose an appropriate visual style for the breadcrumb

You don’t want your breadcrumb to dominate the page. They should be less visible than the main navigation menu. A rule of thumb to follow when sizing and styling your breadcrumb is that it shouldn’t to be the first element that catches the user’s attention when he they or they land on a page. The breadcrumb in the example below isn’t bad, but it’s too catchy and can distract visitors from the main navigation and main content.

Breadcrumb on the Lego site
Image: Author’s screenshot.

On the other hand, the Google support page does notIt doesn’t make its breadcrumb navigation look fancy, but users can quickly locate and use it.

Google Support breadcrumbs
Image: Author’s screenshot.

More in Design + UXFrictionless user experience isn’t always better

Use breadcrumbs to help users find their way

A good browsing experience is an integral part of good product design. Breadcrumbs improve usability and make interacting with a website more comfortable, as they allow visitors to move around the site more easily.

Sherry J. Basler