BreadcrumbNav

1"use client";
2 
3import Link from "next/link";
4import { usePathname } from "next/navigation";
5import { ChevronRight, Home } from "lucide-react";
6 
7interface BreadcrumbNavProps {
8  homeLabel?: string;
9  excludeHome?: boolean;
10  customSegments?: { [key: string]: string };
11}
12 
13const EMPTY_CUSTOM_SEGMENTS: { [key: string]: string } = {};
14 
15export function BreadcrumbNav({
16  homeLabel = "Home",
17  excludeHome = false,
18  customSegments = EMPTY_CUSTOM_SEGMENTS,
19}: BreadcrumbNavProps) {
20  const pathname = usePathname();
21 
22  // Skip rendering if we're on the home page
23  if (pathname === "/") return null;
24 
25  // Split the pathname into segments
26  const segments = pathname
27    .split("/")
28    .filter(Boolean)
29    .map((segment) => {
30      // Check if this segment is a dynamic route parameter (e.g., [slug])
31      const isDynamicSegment = segment.startsWith("[") && segment.endsWith("]");
32 
33      // If it's a dynamic segment, use a placeholder or custom label
34      return {
35        name: customSegments[segment] ||
36              (isDynamicSegment ? segment.replace(/[\[\]]/g, "") : segment),
37        path: segment,
38      };
39    });
40 
41  // Build the breadcrumb items with cumulative paths
42  const breadcrumbItems = segments.map((segment, index) => {
43    const path = `/${segments.slice(0, index + 1).map(s => s.path).join("/")}`;
44    return {
45      name: segment.name.charAt(0).toUpperCase() + segment.name.slice(1).replace(/-/g, " "),
46      path,
47    };
48  });
49 
50  // Add home at the beginning if not excluded
51  if (!excludeHome) {
52    breadcrumbItems.unshift({ name: homeLabel, path: "/" });
53  }
54 
55  return (
56    <nav aria-label="Breadcrumb" className="mb-6 text-sm">
57      <ol className="flex items-center space-x-2">
58        {breadcrumbItems.map((item, index) => (
59          <li key={item.path} className="flex items-center">
60            {index > 0 && (
61              <ChevronRight className="mx-2 h-4 w-4 text-muted-foreground" />
62            )}
63 
64            {index === 0 && !excludeHome && (
65              <Home className="mr-1 h-4 w-4" />
66            )}
67 
68            {index === breadcrumbItems.length - 1 ? (
69              <span className="font-medium text-foreground" aria-current="page">
70                {item.name}
71              </span>
72            ) : (
73              <Link
74                href={item.path}
75                className="text-muted-foreground hover:text-foreground transition-colors"
76              >
77                {item.name}
78              </Link>
79            )}
80          </li>
81// … truncated