Website Breadcrumbs Design
Breadcrumbs is a navigation pattern showing the current page position in site hierarchy. Useful on sites with three or more nesting levels. On flat sites (home → page) breadcrumbs are redundant and clutter the interface.
When Breadcrumbs Are Needed
Needed:
- E-commerce: Home → Electronics → Laptops → Lenovo ThinkPad X1
- Documentation: Docs → API Reference → Authentication → OAuth 2.0
- Corporate site with sections deeper than second level
- Blog with categories and subcategories
Not needed:
- Landing or single-page site
- Any site with maximum 2 levels depth
- Mobile apps with back navigation in header
Three Types of Breadcrumbs
Location breadcrumbs — the most common variant. Reflect site hierarchy:
Home / Services / Web Development / E-commerce
Attribute breadcrumbs — used in e-commerce. Show applied filters/categories, not just path:
Home / Laptops / 15" / Intel Core i7
Path breadcrumbs (history) — show user's actual path. Rarely used — unpredictable for user, poorly combined with direct links and page refresh.
Component Anatomy
Minimal structure: links separated by separator. Current page — last element, usually not a link (or self-link without meaning).
Separators:
-
/— universal, minimalist -
›or>— directional, emphasizes hierarchy - Chevron icon — visually cleaner, but requires icon font or SVG
Typography:
- Size: 12–14px, 2–4px less than main text
- Link color: secondary color or gray-500/600 (not primary — to not compete with main CTA)
- Current page: gray-900 (dark) without underline
Link hover state: underline or color change, not both.
Truncating Long Breadcrumbs
With deep hierarchy or on mobile devices, breadcrumbs don't fit on one line. Two approaches:
Ellipsis collapse — middle elements are hidden under ... or icon:
Home / ... / Laptops / ThinkPad X1
Clicking ... expands full path.
Scroll — breadcrumbs scroll horizontally with overflow-x: auto and hidden scrollbar. First and last element always visible.
For mobile devices, showing only one previous level (← Laptops) works better than full breadcrumb trail.
SEO and Structured Data
Breadcrumbs are important not just for UX but for SEO. Google supports BreadcrumbList in JSON-LD:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Laptops", "item": "https://example.com/laptops/" },
{ "@type": "ListItem", "position": 3, "name": "ThinkPad X1" }
]
}
These data are displayed in search snippet — site takes up more space in results.
Timeline
Design of breadcrumbs component with all variants (standard, collapsed, mobile, hover/active states) — 1 day: development in Figma with Auto Layout and all variants, specification for development.