Breadcrumb

1"use client";
2 
3import { Fragment, useState } from "react";
4import type * as React from "react";
5import { cn } from "@/lib/utils";
6import { coarseTarget, selectionFocus } from "@/lib/recipes";
7 
8import { CaretRight, DotsThree, House } from "@phosphor-icons/react/dist/ssr";
9export interface BreadcrumbItem {
10  /** Label. If `href === "/"` and `name === "Home"`, renders as home icon. */
11  name: string;
12  /** If omitted, the crumb renders as a non-link (useful for the current page). */
13  href?: string;
14  /** Custom leading icon; overrides the auto home-icon behavior. */
15  icon?: React.ReactNode;
16}
17 
18export interface BreadcrumbProps
19  extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
20  items: BreadcrumbItem[];
21  /**
22   * When true, treat any `<a>` element from your router as a Link. The default
23   * uses `<a>`: pass a `linkAs` render prop if you need Next.js Link etc.
24   */
25  linkAs?: (props: {
26    href: string;
27    children: React.ReactNode;
28    className?: string;
29    "aria-label"?: string;
30    "aria-current"?: "page";
31  }) => React.ReactElement;
32}
33 
34function Separator() {
35  return (
36    <CaretRight
37      aria-hidden
38      className="size-3.5 shrink-0 text-ink-tertiary"
39    />
40  );
41}
42 
43/** Horizontal trail of ancestor links. Long chains collapse middle items on mobile. */
44export function Breadcrumb({
45  items,
46  linkAs,
47  className,
48  ...props
49}: BreadcrumbProps): React.ReactElement | null {
50  const [expanded, setExpanded] = useState(false);
51  if (items.length === 0) return null;
52 
53  const collapseMiddle = items.length > 3;
54  const LinkComponent =
55    linkAs ??
56    ((linkProps) => <a {...linkProps}>{linkProps.children}</a>);
57 
58  return (
59    <nav
60      aria-label="Breadcrumb"
61      data-slot="breadcrumb"
62      className={cn("text-small", className)}
63      {...props}
64    >
65      <ol className="flex items-center gap-2 overflow-x-auto whitespace-nowrap text-ink-muted [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
66        {items.map((item, idx) => {
67          const isLast = idx === items.length - 1;
68          const isMiddle = idx > 0 && !isLast;
69          const hiddenOnMobile = collapseMiddle && isMiddle && !expanded;
70          const isHome =
71            item.icon === undefined &&
72            item.href === "/" &&
73            item.name === "Home";
74 
75          const content =
76            item.icon !== undefined ? (
77              <>
78                <span className="inline-flex shrink-0 items-center">
79// … truncated