Breadcrumb5

1import {
2  Breadcrumb,
3  BreadcrumbItem,
4  BreadcrumbLink,
5  BreadcrumbList,
6  BreadcrumbPage,
7  BreadcrumbSeparator,
8} from "@/ui/breadcrumb";
9import { ChevronRight, Dots } from "@mynaui/icons-react";
10import {
11  DropdownMenu,
12  DropdownMenuContent,
13  DropdownMenuItem,
14  DropdownMenuTrigger,
15} from "@/ui/dropdown-menu";
16 
17export default function TruncatedBreadcrumb() {
18  const items = [
19    { name: "Home", href: "#" },
20    { name: "Products", href: "#" },
21    { name: "Electronics", href: "#" },
22    { name: "Computers", href: "#" },
23    { name: "Laptops", href: "#" },
24    { name: "Gaming", href: "#" },
25    {
26      name: "This is a very long category name that needs to be truncated",
27      href: "#",
28      current: true,
29    },
30  ];
31 
32  // Function to truncate text
33  const truncateText = (text: string, maxLength: number) => {
34    if (text.length <= maxLength) return text;
35    return text.slice(0, maxLength) + "...";
36  };
37 
38  return (
39    <Breadcrumb>
40      <BreadcrumbList>
41        <BreadcrumbItem>
42          <BreadcrumbLink href={items[0].href}>{items[0].name}</BreadcrumbLink>
43        </BreadcrumbItem>
44        <BreadcrumbSeparator>
45          <ChevronRight className="stroke-2" />
46        </BreadcrumbSeparator>
47 
48        {items.length > 3 && (
49          <BreadcrumbItem>
50            <DropdownMenu>
51              <DropdownMenuTrigger>
52                <Dots className="stroke-2" />
53              </DropdownMenuTrigger>
54              <DropdownMenuContent align="start">
55                {items.slice(1, -1).map((item) => (
56                  <DropdownMenuItem key={item.name}>
57                    <a href={item.href} className="w-full">
58                      {item.name}
59                    </a>
60                  </DropdownMenuItem>
61                ))}
62              </DropdownMenuContent>
63            </DropdownMenu>
64          </BreadcrumbItem>
65        )}
66 
67        {/* Show penultimate item if there are more than 2 items */}
68        {items.length > 2 && (
69          <>
70            <BreadcrumbSeparator>
71              <ChevronRight className="stroke-2" />
72            </BreadcrumbSeparator>
73            <BreadcrumbItem>
74              <BreadcrumbLink href={items[items.length - 2].href}>
75                {items[items.length - 2].name}
76              </BreadcrumbLink>
77            </BreadcrumbItem>
78          </>
79        )}
80 
81        {/* Last item (always shown, truncated if needed) */}
82        <BreadcrumbSeparator>
83          <ChevronRight className="stroke-2" />
84// … truncated