{
  "id": "breadcrumb",
  "name": "Breadcrumb",
  "level": "molecule",
  "status": "stable",
  "purpose": "Where the reader is: the trail of pages above this one, each a link back.",
  "description": "The trail from the top of the product to the current page — Workspaces › Acme Inc. › Settings — so a person sees where they are and can step back up. Renders `<nav aria-label=\"Breadcrumb\">`, an announced navigation landmark; the current page reads `aria-current=\"page\"`. Separators are `aria-hidden`.",
  "role": "navigation",
  "import": "@rrios-forge/ui/molecules/breadcrumb",
  "exports": [
    "Breadcrumb",
    "BreadcrumbEllipsis",
    "BreadcrumbItem",
    "BreadcrumbLink",
    "BreadcrumbList",
    "BreadcrumbPage",
    "BreadcrumbSeparator"
  ],
  "source": "packages/ui/src/molecules/breadcrumb",
  "axes": [],
  "needs": [],
  "patterns": [],
  "a11yExceptions": [],
  "decisions": [],
  "stories": [
    {
      "name": "Playground",
      "id": "components-molecules-breadcrumb--playground",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-breadcrumb--playground",
      "frame": "/iframe.html?id=components-molecules-breadcrumb--playground&viewMode=story"
    },
    {
      "name": "With ellipsis",
      "id": "components-molecules-breadcrumb--with-ellipsis",
      "interaction": false,
      "snapshots": [
        "dark",
        "high-contrast",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-breadcrumb--with-ellipsis",
      "frame": "/iframe.html?id=components-molecules-breadcrumb--with-ellipsis&viewMode=story"
    }
  ],
  "storyFile": "tooling/storybook/stories/components/molecules/breadcrumb.stories.tsx"
}