shadcn-ui/apps/v4/public/r/styles/base-nova/breadcrumb-example.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb-example",
  "title": "Breadcrumb",
  "registryDependencies": [
    "breadcrumb",
    "dropdown-menu",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/breadcrumb-example.tsx",
      "content": "import Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/bases/base/ui/breadcrumb\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\n\nexport default function BreadcrumbExample() {\n  return (\n    <ExampleWrapper>\n      <BreadcrumbBasic />\n      <BreadcrumbWithDropdown />\n      <BreadcrumbWithLink />\n    </ExampleWrapper>\n  )\n}\n\nfunction BreadcrumbBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center justify-center\">\n      <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>\n    </Example>\n  )\n}\n\nfunction BreadcrumbWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button size=\"icon-sm\" variant=\"ghost\" />}\n              >\n                <BreadcrumbEllipsis />\n                <span className=\"sr-only\">Toggle menu</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\">\n                <DropdownMenuItem>Documentation</DropdownMenuItem>\n                <DropdownMenuItem>Themes</DropdownMenuItem>\n                <DropdownMenuItem>GitHub</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\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>\n    </Example>\n  )\n}\n\nfunction BreadcrumbWithLink() {\n  return (\n    <Example title=\"With Link\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink render={<Link href=\"#\">Home</Link>} />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbEllipsis />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink render={<Link href=\"#\">Components</Link>} />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}