{
  "name": "Breadcrumb",
  "category": "Navigation",
  "subcategory": null,
  "description": "Hierarchical page path with separator characters.",
  "thumbnail": "/preview-cards/breadcrumb.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Breadcrumb/Breadcrumb.razor",
    "UI/Breadcrumb/BreadcrumbEllipsis.razor",
    "UI/Breadcrumb/BreadcrumbItem.razor",
    "UI/Breadcrumb/BreadcrumbLink.razor",
    "UI/Breadcrumb/BreadcrumbList.razor",
    "UI/Breadcrumb/BreadcrumbPage.razor",
    "UI/Breadcrumb/BreadcrumbSeparator.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--color-ring",
    "--radius"
  ],
  "api": {
    "name": "Breadcrumb",
    "category": "Navigation",
    "subcategory": null,
    "description": "Hierarchical page path with separator characters.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Breadcrumb/Breadcrumb.razor",
      "UI/Breadcrumb/BreadcrumbEllipsis.razor",
      "UI/Breadcrumb/BreadcrumbItem.razor",
      "UI/Breadcrumb/BreadcrumbLink.razor",
      "UI/Breadcrumb/BreadcrumbList.razor",
      "UI/Breadcrumb/BreadcrumbPage.razor",
      "UI/Breadcrumb/BreadcrumbSeparator.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--color-ring",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Breadcrumb>\n    <BreadcrumbList>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n    </BreadcrumbList>\n</Breadcrumb>"
      },
      {
        "title": "With Icons",
        "code": "<Breadcrumb>\n    <BreadcrumbList>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">\n                <Blazicon Svg=\"Lucide.Home\" class=\"h-4 w-4\" />\n            </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Documents</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Projects</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbPage>Report.pdf</BreadcrumbPage>\n        </BreadcrumbItem>\n    </BreadcrumbList>\n</Breadcrumb>"
      },
      {
        "title": "Custom Separator",
        "code": "<Breadcrumb>\n    <BreadcrumbList>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n            <Blazicon Svg=\"Lucide.Slash\" class=\"h-4 w-4\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Settings</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n            <Blazicon Svg=\"Lucide.Slash\" class=\"h-4 w-4\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n            <BreadcrumbPage>Profile</BreadcrumbPage>\n        </BreadcrumbItem>\n    </BreadcrumbList>\n</Breadcrumb>"
      }
    ],
    "subComponents": {
      "BreadcrumbEllipsis": {
        "componentName": "BreadcrumbEllipsis",
        "fileName": "BreadcrumbEllipsis.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "BreadcrumbItem": {
        "componentName": "BreadcrumbItem",
        "fileName": "BreadcrumbItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "BreadcrumbLink": {
        "componentName": "BreadcrumbLink",
        "fileName": "BreadcrumbLink.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Href",
            "type": "string?",
            "default": "\"#\"",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "BreadcrumbList": {
        "componentName": "BreadcrumbList",
        "fileName": "BreadcrumbList.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "BreadcrumbPage": {
        "componentName": "BreadcrumbPage",
        "fileName": "BreadcrumbPage.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "BreadcrumbSeparator": {
        "componentName": "BreadcrumbSeparator",
        "fileName": "BreadcrumbSeparator.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "breadcrumb",
  "docsUrl": "https://lumeo.nativ.sh/components/breadcrumb",
  "sourceUrl": [
    {
      "file": "UI/Breadcrumb/Breadcrumb.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Breadcrumb/Breadcrumb.razor"
    },
    {
      "file": "UI/Breadcrumb/BreadcrumbEllipsis.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Breadcrumb/BreadcrumbEllipsis.razor"
    },
    {
      "file": "UI/Breadcrumb/BreadcrumbItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Breadcrumb/BreadcrumbItem.razor"
    },
    {
      "file": "UI/Breadcrumb/BreadcrumbLink.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Breadcrumb/BreadcrumbLink.razor"
    },
    {
      "file": "UI/Breadcrumb/BreadcrumbList.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Breadcrumb/BreadcrumbList.razor"
    },
    {
      "file": "UI/Breadcrumb/BreadcrumbPage.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Breadcrumb/BreadcrumbPage.razor"
    },
    {
      "file": "UI/Breadcrumb/BreadcrumbSeparator.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Breadcrumb/BreadcrumbSeparator.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Breadcrumb/Breadcrumb.razor",
      "content": "@namespace Lumeo\n\n<nav aria-label=\"breadcrumb\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</nav>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"{Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Breadcrumb/BreadcrumbEllipsis.razor",
      "content": "@namespace Lumeo\n\n<li role=\"presentation\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    <Blazicon Svg=\"Lucide.Ellipsis\" class=\"h-4 w-4\" />\n    <span class=\"sr-only\">More</span>\n</li>\n\n@code {\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex items-center justify-center {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Breadcrumb/BreadcrumbItem.razor",
      "content": "@namespace Lumeo\n\n<li class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</li>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"inline-flex items-center gap-1.5 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Breadcrumb/BreadcrumbLink.razor",
      "content": "@namespace Lumeo\n\n<a href=\"@Href\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</a>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Href { get; set; } = \"#\";\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"cursor-pointer transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Breadcrumb/BreadcrumbList.razor",
      "content": "@namespace Lumeo\n\n<ol class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</ol>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Breadcrumb/BreadcrumbPage.razor",
      "content": "@namespace Lumeo\n\n<span role=\"link\" aria-disabled=\"true\" aria-current=\"page\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</span>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"font-normal text-foreground {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Breadcrumb/BreadcrumbSeparator.razor",
      "content": "@namespace Lumeo\n\n<li role=\"presentation\" aria-hidden=\"true\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @if (ChildContent is not null)\n    {\n        @ChildContent\n    }\n    else\n    {\n        <Blazicon Svg=\"Lucide.ChevronRight\" class=\"h-3.5 w-3.5 [dir=rtl]:rotate-180\" />\n    }\n</li>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"[&>svg]:h-3.5 [&>svg]:w-3.5 {Class}\".Trim();\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Breadcrumb",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "BreadcrumbItem",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "BreadcrumbLink",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "BreadcrumbList",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "BreadcrumbPage",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "BreadcrumbSeparator",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "BreadcrumbEllipsis",
      "reason": "sub-component"
    },
    {
      "name": "BreadcrumbItem",
      "reason": "sub-component"
    },
    {
      "name": "BreadcrumbLink",
      "reason": "sub-component"
    },
    {
      "name": "BreadcrumbList",
      "reason": "sub-component"
    },
    {
      "name": "BreadcrumbPage",
      "reason": "sub-component"
    },
    {
      "name": "BreadcrumbSeparator",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Breadcrumb/BreadcrumbTests.cs"
  ],
  "mdSummary": "# Breadcrumb\n\nHierarchical page path with separator characters.\n\n**Package:** `Lumeo` · **Category:** Navigation\n**Docs:** https://lumeo.nativ.sh/components/breadcrumb\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Breadcrumb | ChildContent | `RenderFragment?` | `` |  |\n| Breadcrumb | Class | `string?` | `` |  |\n| Breadcrumb | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| BreadcrumbEllipsis | Class | `string?` | `` |  |\n| BreadcrumbEllipsis | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| BreadcrumbItem | ChildContent | `RenderFragment?` | `` |  |\n| BreadcrumbItem | Class | `string?` | `` |  |\n| BreadcrumbItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| BreadcrumbLink | ChildContent | `RenderFragment?` | `` |  |\n| BreadcrumbLink | Href | `string?` | `\"#\"` |  |\n| BreadcrumbLink | Class | `string?` | `` |  |\n| BreadcrumbLink | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| BreadcrumbList | ChildContent | `RenderFragment?` | `` |  |\n| BreadcrumbList | Class | `string?` | `` |  |\n| BreadcrumbList | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| BreadcrumbPage | ChildContent | `RenderFragment?` | `` |  |\n| BreadcrumbPage | Class | `string?` | `` |  |\n| BreadcrumbPage | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| BreadcrumbSeparator | ChildContent | `RenderFragment?` | `` |  |\n| BreadcrumbSeparator | Class | `string?` | `` |  |\n| BreadcrumbSeparator | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Breadcrumb) — RenderFragment slot\n- `ChildContent` (BreadcrumbItem) — RenderFragment slot\n- `ChildContent` (BreadcrumbLink) — RenderFragment slot\n- `ChildContent` (BreadcrumbList) — RenderFragment slot\n- `ChildContent` (BreadcrumbPage) — RenderFragment slot\n- `ChildContent` (BreadcrumbSeparator) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `BreadcrumbEllipsis`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbList`, `BreadcrumbPage`, `BreadcrumbSeparator`\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Breadcrumb />\n```\n\n## CSS variables\n`--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-ring`, `--radius`\n\n## Files\n- `UI/Breadcrumb/Breadcrumb.razor`\n- `UI/Breadcrumb/BreadcrumbEllipsis.razor`\n- `UI/Breadcrumb/BreadcrumbItem.razor`\n- `UI/Breadcrumb/BreadcrumbLink.razor`\n- `UI/Breadcrumb/BreadcrumbList.razor`\n- `UI/Breadcrumb/BreadcrumbPage.razor`\n- `UI/Breadcrumb/BreadcrumbSeparator.razor`\n"
}