Design

Breadcrumb

A breadcrumb is a navigational aid that displays the current location of a user within the hierarchical structure of a digital product. 

The structure of breadcrumbs is a trail of links that shows the path from the homepage to the current page, with each link representing a level in the hierarchy.

There a two states for breadcrumbs:

The green marked links (1) signal a possible interaction, while the copytext grey colored (2) breadcrumb part shows the current location.

Breadcrumbs are commonly used on websites with multiple levels of content, such as e-commerce sites, news portals, blogs, and other content-heavy websites. They are considered a secondary navigation element and should be used in addition to, not as a replacement for the primary navigation menu.

  • Improving navigation: Breadcrumbs provide users with a clear understanding of where they are within the website's structure, making it easier to navigate and find related content.

  • Encouraging browsing: Breadcrumbs allow users to easily backtrack or explore other sections of the website, promoting further exploration and reducing bounce rates.

  • Improving findability: Breadcrumbs make it easier for users to find specific content or pages within a large website with a complex hierarchy.

  •  SEO benefits: Implementing breadcrumb schema markup can improve a website's search engine optimization (SEO) by helping search engines better understand the site's structure and content hierarchy.