Breadcrumbs

1"use client"
2 
3import * as React from "react"
4import { ChevronRight, MoreHorizontal } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7export interface BreadcrumbItem {
8  label: string
9  /** Omit on the last (current) item — it renders as text with aria-current="page". */
10  href?: string
11}
12 
13export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
14  items: BreadcrumbItem[]
15  /** Collapse to first item + ellipsis + last (maxItems - 1) items once items.length exceeds this. 0 disables collapsing. */
16  maxItems?: number
17  /** Rendered between items and after the ellipsis; aria-hidden. Defaults to a chevron. */
18  separator?: React.ReactNode
19}
20 
21const DEFAULT_SEPARATOR = <ChevronRight className="size-3.5" />
22 
23type Cell = { kind: "item"; item: BreadcrumbItem } | { kind: "ellipsis" }
24 
25export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
26  ({ items, maxItems = 0, separator = DEFAULT_SEPARATOR, className, ...props }, ref) => {
27    // One-way expansion: once the ellipsis is pressed it never collapses again, so this
28    // state stays internal.
29    const [expanded, setExpanded] = React.useState(false)
30    const olRef = React.useRef<HTMLOListElement | null>(null)
31    // maxItems=1 would collapse the aria-current page itself, so clamp to 2 (first + last).
32    const effectiveMax = maxItems > 0 ? Math.max(maxItems, 2) : 0
33    const collapsed = effectiveMax > 0 && items.length > effectiveMax && !expanded
34 
35    const cells: Cell[] = collapsed
36      ? [
37          { kind: "item", item: items[0] },
38          { kind: "ellipsis" },
39          ...items.slice(items.length - (effectiveMax - 1)).map((item): Cell => ({ kind: "item", item })),
40        ]
41      : items.map((item): Cell => ({ kind: "item", item }))
42 
43    const handleExpand = () => {
44      setExpanded(true)
45      // The ellipsis button unmounts with the expansion and focus falls to body — move it
46      // to the first newly revealed link (anchors[0] is the always-present first crumb,
47      // [1] onwards only exist once expanded).
48      requestAnimationFrame(() => {
49        const anchors = olRef.current?.querySelectorAll("a")
50        ;(anchors?.[1] ?? anchors?.[0])?.focus()
51      })
52    }
53 
54    return (
55      <nav aria-label="Breadcrumb" className={cn("text-sm", className)} ref={ref} {...props}>
56        <ol className="flex flex-wrap items-center gap-1.5" ref={olRef}>
57          {cells.map((cell, index) => {
58            const isLast = index === cells.length - 1
59// … truncated