What is breadcrumb navigation?

Breadcrumb navigation: definition and purpose

The name comes from the fairy tale of Hansel and Gretel: the crumbs mark the way back. On a website, breadcrumb navigation shows where the visitor is in the site structure and offers, with every path element, a link to a higher level. It helps with orientation especially on stores, catalogs, and knowledge sites with several levels.

Breadcrumbs do not replace the main navigation but complement it. They show search engines how pages relate to each other and create internal links with descriptive link text. Visitors who land on a deep subpage straight from a search engine find their way back to the overview without a detour.

Types and structure

There are three types. The most common is the path-based variant, which shows the position in the site hierarchy. The attribute-based one shows selected attributes such as category or brand, and the history-based one shows recently visited pages, which is uncommon on websites and tends to make orientation harder.

Technically, a breadcrumb consists of an ordered list in a nav element with a label for screen readers. The current page is marked (aria-current=page). It can also be marked up with structured data (BreadcrumbList from schema.org) so that Google understands the hierarchy.

• Path from the home page to the current page
• Separators such as › or /, which do not count as link text
• All levels except the current one are linked
• Space-saving on smartphones, for example only the parent level

Real-world example: a plumbing wholesaler

A plumbing wholesaler offers 15,000 items across four levels: Home › Heating › Pumps › Circulation pumps. Without breadcrumbs, visitors from search land directly on a product page and cannot find their way back to the category. With breadcrumbs and BreadcrumbList markup, they reach related products in one click, and Google recognizes the categories.

Since early 2025, Google no longer shows the breadcrumb line in mobile search results; only the domain appears there. On desktop it is still displayed. The value for orientation and internal linking is unaffected, and the markup still helps in understanding the site structure.

Benefits, limits, and common mistakes

Breadcrumbs bring better orientation, fewer dead ends, and clean internal linking. On flat websites with few pages the benefit is small, and a badly built version can even confuse visitors or send search engines contradictory signals. You should avoid these points:

• Breadcrumb shows the user's click history instead of the fixed hierarchy
• Markup differs from the visible path
• Current page not recognizable or a link that does nothing
• Click targets too small on smartphones
• Breadcrumb on one-pagers or very flat sites with no visible benefit

Imple­menta­tion

On WordPress, Shopware, and Shopify, many themes include breadcrumbs, but they must match the actual site structure. Nano Concepts builds breadcrumbs accessibly and with structured data so that the visible hierarchy and the markup agree, and tests them on small screens and with screen readers.