Breadcrumbs

1import { ChevronRight } from "lucide-react"
2import Link from "next/link"
3 
4import { cn } from "@/lib/utils"
5 
6export type BreadcrumbItem = {
7  label: string
8  href?: string
9}
10 
11export function Breadcrumbs({
12  items,
13  className,
14}: {
15  items: BreadcrumbItem[]
16  className?: string
17}) {
18  return (
19    <nav aria-label="Breadcrumb" className={cn("text-sm", className)}>
20      <ol className="flex flex-wrap items-center gap-1.5">
21        {items.map((item, i) => {
22          const isLast = i === items.length - 1
23          return (
24            <li key={item.label} className="flex items-center gap-1.5">
25              {i > 0 ? (
26                <ChevronRight
27                  className="size-3.5 text-muted-foreground/60"
28                  aria-hidden
29                />
30              ) : null}
31              {isLast || !item.href ? (
32                <span
33                  className="text-muted-foreground"
34                  aria-current={isLast ? "page" : undefined}
35                >
36                  {item.label}
37                </span>
38              ) : (
39                <Link
40                  href={item.href}
41                  className="text-muted-foreground hover:text-foreground"
42                >
43                  {item.label}
44                </Link>
45              )}
46            </li>
47          )
48        })}
49      </ol>
50    </nav>
51  )
52}