Breadcrumb

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { ChevronRight } from "lucide-react";
5import { motion, useReducedMotion } from "motion/react";
6import type { ReactNode } from "react";
7import { SPRING_DEFAULT } from "@/components/smoothui/lib/animation";
8 
9/** A single breadcrumb item definition. */
10export type BreadcrumbItemProps = {
11  /** Display label for the breadcrumb item. */
12  label: ReactNode;
13  /** URL the breadcrumb links to. Omit for the current (last) page. */
14  href?: string;
15};
16 
17export type BreadcrumbProps = {
18  /** Ordered list of breadcrumb items. The last item is treated as the current page. */
19  items: BreadcrumbItemProps[];
20  /** Custom separator element. Defaults to a chevron icon. */
21  separator?: ReactNode;
22  /** Additional CSS classes for the nav element. */
23  className?: string;
24};
25 
26const staggerDelay = 0.04;
27 
28export default function Breadcrumb({
29  items,
30  separator,
31  className,
32}: BreadcrumbProps) {
33  const shouldReduceMotion = useReducedMotion();
34 
35  return (
36    <nav aria-label="Breadcrumb" className={cn("inline-flex", className)}>
37      <ol className="flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5">
38        {items.map((item, index) => {
39          const isLast = index === items.length - 1;
40 
41          return (
42            <motion.li
43              animate={{ opacity: 1, transform: "translateX(0px)" }}
44              className="inline-flex items-center gap-1.5"
45              initial={
46                shouldReduceMotion
47                  ? { opacity: 1 }
48                  : { opacity: 0, transform: "translateX(-4px)" }
49              }
50              key={
51                typeof item.label === "string"
52                  ? item.label
53                  : `breadcrumb-${String(index)}`
54              }
55              transition={
56                shouldReduceMotion
57                  ? { duration: 0 }
58                  : {
59                      ...SPRING_DEFAULT,
60                      delay: index * staggerDelay,
61                    }
62              }
63            >
64              {index > 0 && (
65                <span
66                  aria-hidden="true"
67                  className="mr-1.5 [&>svg]:size-3.5"
68                  role="presentation"
69                >
70                  {separator ?? <ChevronRight className="size-3.5" />}
71                </span>
72              )}
73              {isLast ? (
74                <span
75                  aria-current="page"
76// … truncated