Breadcrumbs

1
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2
import { faChevronRight, faAngleRight } from "@fortawesome/free-solid-svg-icons";
3
import { faHouse } from "@fortawesome/free-regular-svg-icons";
4
5
type Crumb = { label: string; href?: string };
6
7
// Props:
8
//   items      — the breadcrumb trail (array of { label, href }). The last item is the current page.
9
//   separator  — what to draw between items: "chevron", "slash", or "angle" (default "chevron").
10
//   showHome   — set true to show a home icon link at the start (default false).
11
12
function Breadcrumbs({
13
  items,
14
  separator = "chevron",
15
  showHome = false,
16
}: {
17
  items: Crumb[];
18
  separator?: "chevron" | "slash" | "angle";
19
  showHome?: boolean;
20
}) {
21
  return (
22
    <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1 text-sm">
23
      {showHome && (
24
        <a href="/" className="text-muted-foreground hover:text-foreground flex shrink-0 items-center transition-colors" aria-label="Home">
25
          <FontAwesomeIcon icon={faHouse} className="h-3.5 w-3.5" />
26
        </a>
27
      )}
28
      {items.map((crumb, i) => {
29
        const isLast = i === items.length - 1;
30
        return (
31
          <span key={i} className={`flex items-center gap-1 ${isLast ? "min-w-0" : "shrink-0"}`}>
32
            {(showHome || i > 0) && (
33
              separator === "slash" ? (
34
                <span className="text-muted-foreground/50 shrink-0">/</span>
35
              ) : (
36
                <FontAwesomeIcon
37
                  icon={separator === "angle" ? faAngleRight : faChevronRight}
38
                  className="text-muted-foreground/50 h-2.5 w-2.5 shrink-0"
39
                />
40
              )
41
            )}
42
            {isLast || !crumb.href ? (
43
              <span className={`whitespace-nowrap ${isLast ? "text-foreground truncate" : "text-foreground"}`}>{crumb.label}</span>
44
            ) : (
45
              <a href={crumb.href} className="text-muted-foreground hover:text-foreground whitespace-nowrap transition-colors">
46
                {crumb.label}
47
              </a>
48
            )}
49
          </span>
50
        );
51
      })}
52
    </nav>
53
  );
54
}
55
56
// Usage
57
const items = [
58
  { label: "Case Study", href: "/case-study" },
59
  { label: "Components", href: "/case-study#components" },
60
  { label: "Breadcrumbs" },
61
];
62
63
<Breadcrumbs items={items} />
64
<Breadcrumbs items={items} showHome />
65
<Breadcrumbs items={items} separator="slash" />
66
<Breadcrumbs items={items} separator="angle" />