Breadcrumb

Breadcrumb navigation is a secondary navigation element on a website that displays a user’s current location within the page hierarchy as a horizontal chain of links. It complements the main navigation and main menu but does not replace them. Typical is a presentation of the form Home › Category › Subcategory › current page, with the individual stations separated by ›, / or an arrow symbol. Breadcrumbs create orientation, speed up navigation on large websites and are displayed by Google as a structured data element directly in the search results.

Where does the name “breadcrumb” come from?

The term comes from the Brothers Grimm fairy tale “Hansel and Gretel”: the two siblings scatter breadcrumbs to find their way back home. Web designers transfer this metaphor to user guidance – the breadcrumbs mark the path a visitor has travelled from the homepage to the current page and keep the way back visible at all times.

Three types of breadcrumbs

Not every breadcrumb works the same way. In practice, three variants have established themselves, serving different purposes.

Location-based breadcrumbs

They show the current page’s hierarchical position within the site structure. Example: Home › Services › Web development › SEO. This variant is the most widespread and fits every site with a clear, tree-like structure – such as online shops, magazines, large corporate sites or extensive knowledge bases.

Attribute-based breadcrumbs

Instead of a hierarchy, they reflect the filter properties of the current view, frequently on product listing pages in e-commerce shops. Example: Shoes › Women › Size 39 › Black. Each station here corresponds to an active filter, not a hierarchical step. They help users reflect on their selection and remove individual filters in a targeted way.

Path-based breadcrumbs

These show a visitor’s actual click path, i.e. the sequence of most recently visited pages. Functionally they correspond to the browser’s back and forward buttons and are considered outdated today, because they look different for every user and therefore offer no reliable orientation.

Benefits of breadcrumb navigation

Better usability

Breadcrumbs show at all times where the user is and allow a jump back across any number of levels with a single click. That reduces the bounce rate, because visitors switch to a higher category level more easily instead of leaving the site.

SEO benefits

Google uses structured data of type BreadcrumbList (Schema.org) to display the path structure directly in the search results: instead of a full URL, a readable hierarchy such as aceart.de › glossar › breadcrumb appears there. That improves the click-through rate (CTR) and gives Google additional hints about the site structure, making the crawling process more efficient.

A clear information architecture

Breadcrumbs force editors and developers to maintain a clean sitemap and categorisation. An inconsistent hierarchy stands out immediately in the breadcrumb and can be corrected before it hardens in the rest of the site structure.

Small footprint

A breadcrumb line takes up only a narrow row, usually directly below the header. Compared to an expanded side navigation, it’s unobtrusive and hardly disturbs the actual layout, yet delivers the same orientation information.

Mobile suitability

On small screens, where mega menus quickly become cluttered, compact breadcrumbs create clarity about the current location and ideally complement a mobile-first design concept.

When are breadcrumbs worth it, and when not?

Breadcrumbs make sense as soon as a website has more than two hierarchy levels. Classic use cases:

• Online shops with product categories, filters and detail pages
• Magazines and blogs with topic and tag structures
• Knowledge bases, glossaries, documentation and help centres
• Multilingual corporate websites with a deep country-language-section structure
• Government sites and large public portals

You can do without breadcrumbs on:

• Single landing pages without further subpages
• Very flat websites with at most two levels (homepage + a few subpages)
• Single-page applications with purely modal-based navigation

Best practices for breadcrumbs

1. Always include the homepage: “Home” as the first element of the breadcrumb chain.
2. Don’t link the current page: the last station is plain text, not clickable, so users don’t mistakenly link to the page they’re already on.
3. Use clear separators: ›, / or an arrow symbol. Consistent across the whole site.
4. Reflect the logical hierarchy, not the user’s click history. Location-based > path-based.
5. Mobile optimisation: on small screens, abbreviate long category names if necessary or collapse the middle stations into “…”.
6. Add structured data (see below), without BreadcrumbList markup, the SEO effect doesn’t materialise.
7. Place consistently, ideally always in the same spot, usually top left below the header.

Marking up breadcrumbs with Schema.org

For Google to show the breadcrumb chain in the SERPs (search engine result pages), it must be embedded in the source code as JSON-LD with the schema type BreadcrumbList:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.aceart.de/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Glossary",
      "item": "https://www.aceart.de/glossar/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Breadcrumb",
      "item": "https://www.aceart.de/glossar/breadcrumb/"
    }
  ]
}
</script>

Alternatively, the older microdata or RDFa markup also works; JSON-LD is recommended by Google because it separates cleanly from the visible markup. In the visible HTML, a semantic <nav aria-label="Breadcrumb"> with an ordered list <ol> inside is enough – making the navigation clearly recognisable as such for screen readers too.

Frequently asked questions about breadcrumbs

Are breadcrumbs a direct ranking factor? No, not officially. Google does process them as a structured data element, though, and uses them for the SERP display. Indirectly they improve crawling, click-through rate and dwell time – all signals that influence rankings positively.

Must breadcrumbs follow the URL structure? Ideally yes, but it’s not mandatory. More important than exact URL correspondence is the thematic hierarchy. If a page is reachable via several routes, the breadcrumb chain should show the primary thematic classification.

How deep may a breadcrumb be? Three to five levels are the comfort zone. At six or more stations it’s worth questioning the information architecture, since deeper paths often point to an overly fragmented structure.

Can breadcrumbs replace mega menus? No. Breadcrumbs show the location, the main menu shows the access to all areas. Both have different jobs and complement each other.

Conclusion

Breadcrumbs are a lightweight, versatile navigation element that simultaneously improves usability, information architecture and, with correct Schema.org markup, visibility in Google. On any website with three or more hierarchy levels, they belong to the standard equipment. We’re happy to advise you on the ideal navigation structure for your website – get in touch for a no-obligation consultation.