Definition:
A breadcrumb is a secondary navigation element that represents a page’s position within a website hierarchy through an ordered sequence of labels. Each preceding level normally links to a higher-level page, while the final item identifies the current page.
Their primary function is to orient users and provide access to broader levels. They do not necessarily reproduce the pages visited during a session or replace the main menu, search facility or local navigation.
A breadcrumb is particularly useful on websites with several levels, including ecommerce sites, publications, knowledge bases and catalogues. It may provide little additional information on a flat website with very few pages.
Table of contents
A typical trail may take the form Home > Category > Subcategory > Current page. Preceding items allow users to move up the hierarchy, while the current page is usually displayed as text without a link to avoid an action that leads to the same destination.
The sequence needs to represent a structure that users can understand. It does not need to reproduce URL folders literally or show the route followed to reach the page. A person may arrive from a search engine or external link and use the breadcrumbs to understand their current location.
A breadcrumb describes a particular hierarchical relationship. A navigation path is a broader concept that can include the actual sequence of pages, decisions and interactions within a journey through a website or application.
The classification depends on the information represented by the trail:
- Location or hierarchy breadcrumbs: show higher levels in the website architecture. They are the most common type and remain stable when users reach the page through different routes.
- Attribute breadcrumbs: represent selected filters or properties, such as category, brand, size or colour. They are mainly used in catalogues and faceted-navigation systems.
- Path or history breadcrumbs: show previous steps in a session or process. They are less common on hierarchical websites and should not be confused with location breadcrumbs.
One page may belong to more than one classification or section. In this situation, the displayed trail needs to remain coherent and predictable and reflect the relationship that is most useful for understanding the content.
Design and accessibility
The breadcrumb needs to be identifiable and usable without competing with the main content:
- Placement: they commonly appear near the beginning of the content and in a consistent position across equivalent pages.
- Labels: each level needs a short, descriptive name that matches the linked destination.
- Separators: symbols such as
>indicate the relationship between levels but should not form part of the accessible text of each link. - Mobile adaptation: size, spacing and responsive behaviour need to prevent difficult-to-select links or trails that occupy unnecessary lines.
The component can be identified as a navigation region with an accessible label and represented as an ordered list. Link labels need to describe architecture levels rather than being used to insert keywords artificially.
Breadcrumb and SEO
A breadcrumb creates internal links to higher levels and helps express relationships within the information architecture. This can support crawling and interpretation, but it does not guarantee higher rankings, a lower bounce rate or longer sessions. Any effect depends on the usefulness of the structure and the other SEO signals.
Search engines may use this information to display a trail instead of a complete URL in a search result. BreadcrumbList describes the trail as structured data through ListItem elements containing their position, name and, where applicable, URL. Google maintains the technical breadcrumb documentation and supports JSON-LD, RDFa and Microdata.
The schema markup needs to represent a hierarchy that is consistent with the navigation and content. Its implementation allows a search engine to process that information, but it does not force its display or turn the result into a rich snippet by itself. Visible navigation still needs to be understandable when the structured data is not processed.