Breadcrumbs are one of the smallest UI elements on a website, yet they carry a disproportionate amount of weight when it comes to usability and SEO. The right pattern helps users understand where they are, lets them jump back without hitting the browser’s back button, and gives Google a clean signal about your site hierarchy.
Instead of repeating generic advice you can find anywhere, this post compares 10 real breadcrumb navigation examples across e-commerce, SaaS dashboards, and content-heavy sites. For each one, we look at the hierarchy logic, the separator style, and how the breadcrumb behaves on mobile, so you can pick the pattern that actually fits your structure.
What Breadcrumb Navigation Actually Does
A breadcrumb is a secondary navigation aid, usually placed below the main header, that shows a user’s location inside a site’s hierarchy. Think of it as a trail leading back to the homepage. Done well, it reduces bounce rate, improves crawl depth understanding, and adds rich snippets to your search listings.
There are three main types you will see in the wild:
- Location-based: shows where the page sits in the site structure (most common).
- Attribute-based: shows filters or product attributes (popular on e-commerce).
- Path-based (history): shows the user’s actual click path (rarely used today, mostly redundant with browser history).
10 Breadcrumb Navigation Examples Compared
1. Amazon: Attribute-Based E-commerce Breadcrumbs
Amazon uses location plus category breadcrumbs above the product title. The hierarchy is deep (often 4 to 6 levels) and uses the › separator.
- Hierarchy: Department › Category › Subcategory › Product type
- Separator: chevron arrow
- Mobile: the trail truncates and only the parent category remains visible, tappable to expand
Best for: large catalogs with deep taxonomy.
2. Etsy: Hybrid Search and Location Breadcrumbs
Etsy combines location with the user’s search context. If you searched “linen apron”, the breadcrumb reflects that query alongside the category path.
- Hierarchy: Home › Category › Search term
- Separator: slash
- Mobile: hidden behind a back arrow at the top of the screen
3. BBC News: Topic-Based Editorial Breadcrumbs
BBC uses a minimal two-level breadcrumb that reflects the editorial section rather than URL depth.
- Hierarchy: Section > Topic
- Separator: pipe character or simple spacing
- Mobile: kept visible but compressed into a single row with horizontal scroll
4. Apple Support: Documentation Breadcrumbs
Apple’s support docs show a clean three-level path that helps users back out of deep troubleshooting flows.
- Hierarchy: Support › Product › Article
- Separator: chevron with generous spacing
- Mobile: collapses to show only the immediate parent
5. Notion Help Center: SaaS Knowledge Base Style
Notion uses a flat, two-level breadcrumb that prioritizes the parent collection over deep nesting.
- Hierarchy: Help Center / Category
- Separator: forward slash
- Mobile: stays full width, breadcrumb wraps if needed
6. Stripe Dashboard: Functional SaaS Breadcrumbs
Inside Stripe’s dashboard, breadcrumbs reflect the data hierarchy (customer > subscription > invoice). Each level is clickable and shows context-specific actions.
- Hierarchy: Object › Sub-object › Detail
- Separator: chevron
- Mobile: replaced with a single back link to parent
7. The Guardian: Section-Only Breadcrumbs
The Guardian opts for an ultra-minimal breadcrumb showing only the section name above the article headline, almost more like a label than a trail.
- Hierarchy: Section (single level)
- Separator: none, just the section title styled as a link
- Mobile: identical to desktop
8. IKEA: Product Filter Breadcrumbs
IKEA shows location-based breadcrumbs at the top of category pages, with applied filters appearing as removable chips below.
- Hierarchy: Home / Room / Furniture type / Product
- Separator: forward slash
- Mobile: visible but smaller font, no truncation
9. GitHub: Path-Style Breadcrumbs for Repositories
GitHub uses breadcrumbs that mirror the file path. They look like code, which fits the audience perfectly.
- Hierarchy: Org / Repo / Folder / File
- Separator: forward slash, monospaced font
- Mobile: horizontal scroll preserves the full path
10. Wikipedia (Category Pages): Hierarchical Tree Breadcrumbs
Wikipedia category pages display breadcrumbs that show the full taxonomic ancestry, sometimes with multiple parents.
- Hierarchy: Multi-parent, can branch
- Separator: arrow or nested indentation
- Mobile: collapses with a “show more” toggle
Quick Comparison Table
| Site | Type | Separator | Mobile Behavior |
|---|---|---|---|
| Amazon | Location + attribute | Chevron | Truncated |
| Etsy | Hybrid | Slash | Hidden, back arrow |
| BBC | Topic | Pipe | Horizontal scroll |
| Apple Support | Location | Chevron | Parent only |
| Notion Help | Location | Slash | Wraps |
| Stripe | Functional | Chevron | Back link |
| The Guardian | Section only | None | Same as desktop |
| IKEA | Location | Slash | Smaller, full |
| GitHub | Path | Slash | Horizontal scroll |
| Wikipedia | Tree | Arrow | Show more toggle |
How to Choose the Right Breadcrumb Pattern
Match the pattern to your site type rather than chasing what looks pretty:
- Deep e-commerce catalog: use Amazon or IKEA style with truncation on mobile.
- SaaS dashboard: use Stripe-style functional breadcrumbs tied to data objects.
- Knowledge base or docs: use Apple or Notion two to three level patterns.
- News or blog: a single section label like The Guardian usually beats a long trail.
- File or path-based UI: GitHub style with monospace fonts works best.
Common Breadcrumb Mistakes to Avoid
- Using breadcrumbs as the only navigation. They are a secondary aid, not a replacement for primary nav.
- Making the current page a link. The last item should be plain text.
- Hiding breadcrumbs entirely on mobile when the hierarchy is genuinely useful.
- Forgetting the schema markup. Add BreadcrumbList structured data so Google can show it in SERPs.
- Building a breadcrumb that does not match URL structure. Consistency matters for both users and crawlers.
Accessibility Checklist
Whichever pattern you pick, wrap it correctly:
- Use a <nav> element with an aria-label=”Breadcrumb” attribute.
- Mark the current page with aria-current=”page”.
- Keep separators decorative by hiding them from screen readers with aria-hidden=”true”.
- Ensure tap targets are at least 44 by 44 pixels on mobile.
FAQ
Where do most users expect to see a breadcrumb trail?
Just below the main navigation bar, above the page title. This placement has been the convention for over a decade and users scan that area first when they need orientation.
Are breadcrumbs still good for SEO?
Yes. Google still uses BreadcrumbList structured data to display breadcrumb paths instead of plain URLs in search results, which improves click-through rate and helps the crawler understand site hierarchy.
Should breadcrumbs appear on the homepage?
No. The homepage is the root of your hierarchy, so a breadcrumb there would either be empty or redundant.
What is the best separator for breadcrumbs?
The chevron (›) and the forward slash (/) are the two most readable choices. Avoid arrows that look like back buttons or icons that require explanation.
Should I show breadcrumbs on mobile?
If your hierarchy is more than two levels deep and users land on inner pages from search, yes. Truncate intelligently or use a horizontal scroll. For shallow sites, a single back link is often enough.
Final Thoughts
There is no single best breadcrumb pattern. The examples above show that Amazon, Stripe, and The Guardian all solve the same orientation problem with very different solutions, and each one fits its context. Audit your site structure, pick the closest match, and pay attention to mobile behavior. A well implemented breadcrumb is invisible when it works, and that is exactly the goal.
Need help auditing your site navigation or rebuilding it from the ground up? Zach’s Web Designs can help. Get in touch through our contact page and we will take a look.