Breadcrumb

A breadcrumb is a website navigation scheme that shows the user’s current location on a website. It is a sequence of links that allows the user to easily visualize their path from the home page to the current page they are viewing. Essentially, breadcrumbs offer a way to help users orient themselves on a website by showing them where they are and how they got there.

Purpose

The purpose of breadcrumbs is to increase the usability and accessibility of a website by making it easier for users to understand where they are and how to get back to where they came from. Breadcrumbs also help users quickly navigate to a higher-level page or category, reducing the number of clicks required to get there.

Breadcrumbs are especially useful for websites that have a complex hierarchical structure, such as e-commerce sites or news websites. In these cases, breadcrumbs provide a way for users to easily navigate through multiple levels of the site without getting lost or confused.

Usage

Breadcrumbs can be implemented in a variety of ways, but the most common method is to display them horizontally at the top of a page, just below the header. Breadcrumbs can also be displayed vertically along the left side of a page or in a sidebar.

There are two main types of breadcrumbs: location-based breadcrumbs and attribute-based breadcrumbs.

Location-Based Breadcrumbs

Location-based breadcrumbs show the user’s current location in the website hierarchy. They typically start with a link to the home page, followed by the name of the current page or category, and then any parent categories leading up to the current page. For example:

Home > Products > Electronics > TVs > 42″ LED TV

In this example, the user is currently viewing a 42″ LED TV product page, which belongs to the TVs category, which belongs to the Electronics category, which belongs to the Products category, which is the top-level category.

Location-based breadcrumbs are the most common type of breadcrumb and are used on almost every website that uses breadcrumbs. They provide a clear and concise way for users to understand where they are on the site and how to get back to previous pages.

Attribute-Based Breadcrumbs

Attribute-based breadcrumbs show the user’s current location based on the attributes of the content they are viewing, rather than its location in the website hierarchy. For example:

Home > Color: Red > Brand: Samsung > Model: 42″ LED TV

In this example, the user is viewing a red Samsung 42″ LED TV. The breadcrumb trail shows the attributes of the TV, rather than its location in the website hierarchy.

Attribute-based breadcrumbs are less common than location-based breadcrumbs but can be useful for websites that sell products with multiple attributes, such as clothing or electronics.

Best Practices

When implementing breadcrumbs on a website, there are several best practices to follow to ensure they are effective and user-friendly.

1. Use location-based breadcrumbs: Location-based breadcrumbs are the most common and user-friendly type of breadcrumb. They provide a clear and concise way for users to understand where they are on the site and how to get back to previous pages.

2. Display breadcrumbs prominently: Breadcrumbs should be displayed prominently at the top of a page, just below the header. This makes them easy to find and use.

3. Use clear and concise labels: Breadcrumb labels should be clear and concise, using common terminology that users will understand. Avoid using jargon or technical language that may confuse users.

4. Make breadcrumbs clickable: Breadcrumbs should be clickable links that allow users to quickly navigate to a higher-level page or category. This reduces the number of clicks required to get to a desired page.

5. Use responsive design: Breadcrumbs should be designed to be responsive and adaptable to different screen sizes and devices. This ensures that users can access them on any device they use to access the website.