Breadcrumb

A breadcrumb is a navigation element that indicates the current page's location within a navigational hierarchy that automatically adds separators. One primary use of breadcrumbs is to enhance the user experience by providing a trail of links that represent the hierarchical path leading to the current page.

This enables users to backtrack easily and navigate between different levels of the website, improving overall site usability. Additionally, breadcrumbs contribute to improved website accessibility, helping users to comprehend the site's organization.

Types of Breadcrumbs

There are primarily three types of breadcrumbs:

1. Location-based breadcrumbs indicate the user's current position in the website's hierarchy by illustrating the path from the homepage to the current page, such as Home > Category > Subcategory > Current Page.
2. Attribute-based breadcrumbs offer details about the attributes or characteristics of the current page, especially beneficial on e-commerce websites where users may filter or sort products based on specific attributes like Home > Brand > Color > Size.
3. Path-based breadcrumbs showcase the user's journey steps leading to the current page, revealing their navigation history, as illustrated by Home > Previous Page > Current Page.

Breadcrumbs streamline navigation by enabling users to easily jump from higher-level categories (such as the Home Page) directly to specific sections, eliminating the need to backtrack through multiple pages (e.g., from the Blog Page to a specific Blog article).