id: breadcrumb
name: Breadcrumb
component: Breadcrumb
category: navigation
purpose: >
  Displays the hierarchical path of the current page within the site structure, allowing quick navigation up the parent tree.

anatomy:
  - root
  - list
  - item
  - link
  - separator
  - current

variants:
  default:
    intent: standard-breadcrumbs
  slash:
    intent: forward-slash-separator
  chevron:
    intent: directional-chevron-separator

sizes:
  sm:
    font_size: "var(--qhr-text-xs)"
    gap: 4
  md:
    font_size: "var(--qhr-text-sm)"
    gap: 6
  lg:
    font_size: "var(--qhr-text-base)"
    gap: 8

states:
  - default
  - hover
  - current

slots:
  homeIcon: optional
  items: required
  separator: optional

accessibility:
  role: navigation
  aria:
    - "aria-label=breadcrumb"
    - "aria-current=page"
  keyboard: true
  focusVisible: true

ai:
  purpose: "Hierarchical navigational breadcrumb trail"
  whenToUse:
    - "Deeply nested e-commerce catalog categories"
    - "Documentation pages and multi-tier administrative dashboards"
    - "Multi-step checkout or application funnels"
  avoid:
    - "Single-level top-level landing pages without parent hierarchy"
    - "Replacing primary navbar navigation"
  common_patterns:
    - search-toolbar
    - filter-bar