Breadcrumbs Component

Design a breadcrumbs component that shows the navigation hierarchy and allows users to navigate back.

R - Requirements

Key Questions:

• Max items? (show all, truncate with ellipsis)
• Separator? (/, >, arrow)
• Last item clickable? (usually no, current page)
• Mobile behavior? (scroll, dropdown, collapse)
• URL structure? (reflects hierarchy)

Common Answers:

• Show all items (or truncate if > 5)
• "/" or ">" separator
• Last item not clickable (current page)
• Horizontal scroll on mobile
• URL reflects hierarchy

A - Architecture

Breadcrumb Generation Flow:

Breadcrumb Architecture:

Architecture Decisions:

• Hierarchy structure (array of items with labels/URLs) - Derived from route or explicit
• Truncation logic (when to show ellipsis) - If > 5 items, show first + ... + last
• Mobile behavior (scroll vs dropdown) - Horizontal scroll for mobile
• URL generation (from hierarchy or separate) - Can derive from route or be explicit

Relevant Content:

• Accessibility Patterns - Navigation patterns

D - Data Model

State Management:

• Breadcrumb items (array of { label, url, current })
• Hierarchy depth (number of levels)
• Truncated state (if too many items)

Persistence:

• None (breadcrumbs are derived from route/hierarchy)

I - Interface

Features:

• Breadcrumb list (horizontal)
• Breadcrumb items (links, except last)
• Separator (/, >, arrow icon)
• Ellipsis (when truncated)
• Mobile scroll (horizontal scrollbar)

Accessibility:

• ARIA breadcrumb pattern
• role="navigation" on container
• aria-label="Breadcrumb" on nav
• aria-current="page" on last item
• Keyboard navigation (Tab to navigate links)

Relevant Content:

• Keyboard Shortcuts - Navigation
• Accessible Animations - Hover effects

O - Optimizations

Performance:

• Memoize hierarchy (prevent recalculation)
• Lazy render (only render visible items if truncated)

UX:

• Smooth hover effects (underline, color change)
• Mobile-friendly (horizontal scroll, touch-friendly)

Relevant Content:

• Animation Performance - Hover effects
• Mobile Performance - Touch optimization

Implementation Checklist

• Breadcrumb list (horizontal)
• Breadcrumb items (links, last item not clickable)
• Separator (/, >, or icon)
• Truncation logic (ellipsis if > 5 items)
• Mobile scroll (horizontal scrollbar)
• ARIA attributes (role, aria-label, aria-current)
• Keyboard navigation (Tab to navigate)
• Hover effects (underline, color change)
• URL structure (reflects hierarchy)

Common Pitfalls

❌ Last item clickable → Confusing, reloads current page
✅ Last item not clickable, aria-current="page"

❌ No truncation → UI cluttered with many items
✅ Truncate if > 5 items, show ellipsis, keep first and last

❌ Poor mobile UX → Breadcrumbs cut off, unusable
✅ Horizontal scroll, touch-friendly, show scroll indicators

❌ No ARIA → Screen readers don't understand structure
✅ role="navigation", aria-label, aria-current on last item