Doc Breadcrumb

npx shadcn@latest add https://blocks.aiskillhub.info/api/registry/doc-breadcrumb

import { ChevronRight } from "lucide-react";

export function DocBreadcrumb({ path }: { path: { label: string; href?: string }[] }) {
  return (
    <nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm text-muted">
      {path.map((seg, i) => (
        <span key={i} className="flex items-center gap-1">
          {i > 0 && <ChevronRight className="h-3.5 w-3.5" />}
          {seg.href ? (
            <a href={seg.href} className="rounded px-1 py-0.5 hover:bg-surface-2 hover:text-foreground">{seg.label}</a>
          ) : (
            <span className="px-1 font-medium text-foreground">{seg.label}</span>
          )}
        </span>
      ))}
    </nav>
  );
}