Breadcrumbs

• Overview
• When to Use Breadcrumbs
• Ecommerce Breadcrumb Patterns
• Mobile Breadcrumbs
• SEO Structured Data
• Checklist

Overview

Breadcrumbs show the user’s location within the site hierarchy (Home → Category → Subcategory → Product). Critical for ecommerce navigation and SEO.

Assumed knowledge: AI agents know how to build breadcrumbs with separators and links. This guide focuses on ecommerce-specific patterns.

Key Requirements

• Show full path from homepage to current page
• Each level clickable (except current page)
• Position below navbar, above page title
• Include structured data for SEO (JSON-LD)
• Mobile-optimized (back link pattern)

When to Use Breadcrumbs

Use for:

• Product pages (Home → Category → Subcategory → Product)
• Category pages (Home → Category → Subcategory)
• Deep site hierarchies (3+ levels)
• Large catalogs with many categories

Don’t use for:

• Homepage (no parent pages)
• Flat site structures (1-2 levels)
• Checkout flow (linear, not hierarchical)
• Search results (not hierarchical)

Ecommerce Breadcrumb Patterns

Product Page Breadcrumbs

Standard pattern:

• Home / Category / Subcategory / Product Name
• Example: Home / Electronics / Laptops / Gaming Laptop Pro

Key considerations:

• All levels except product name are clickable
• Product name is current page (non-clickable, darker text)
• Shows product’s location in catalog

Multiple category membership:

• If product in multiple categories, choose primary/canonical
• Match category in URL or navigation path
• Be consistent across site

Category Page Breadcrumbs

Standard pattern:

• Home / Parent Category / Current Category
• Example: Home / Electronics / Laptops

Current category:

• Non-clickable (plain text)
• Visually distinct from links (darker or bold)

Path Construction

Hierarchy:

• Start with “Home” (or home icon)
• Follow category hierarchy
• End with current page
• Maximum 5-6 levels (keep shallow)

URL alignment:

• Breadcrumb path should match URL hierarchy
• Consistent naming between URLs and breadcrumbs
• Example: /categories/electronics/laptops → “Home / Electronics / Laptops”

Mobile Breadcrumbs

Mobile Pattern: Collapse to Back Link

Recommended approach:

• Show only previous level as back link
• Back arrow icon (←) + parent page name
• Example: “← Gaming Laptops”

Why:

• Saves vertical space on mobile
• Clear affordance (back navigation)
• Simpler than full breadcrumb trail
• Mobile users have device back button

Alternative: Truncated path

• Show “Home … Current Page”
• Hide middle levels
• Balances space and context

SEO Structured Data

BreadcrumbList schema (CRITICAL): Add JSON-LD structured data. Breadcrumbs appear in search results, improves CTR, helps search engines understand site structure.

Implementation: schema.org BreadcrumbList with items array. Each item has position (1, 2, 3…), name, and URL. See seo.md for schema details.

Checklist

Essential features:

• Not done: Positioned below navbar, above page title
• Not done: Full path shown (Home → Category → Product)
• Not done: All levels clickable except current page
• Not done: Current page visually distinct (non-clickable, darker)
• Not done: Clear separators (›, /, > or chevron)
• Not done: Mobile: Back link pattern (“← Category”)
• Not done: Structured data (JSON-LD BreadcrumbList)
• Not done: Semantic HTML (<nav aria-label="Breadcrumb">)
• Not done: aria-current="page" on current item
• Not done: Keyboard accessible (tab through links)
• Not done: Truncate long labels (20-30 characters max)
• Not done: Consistent with navigation labels
• Not done: Maximum 5-6 levels deep