"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export interface BreadcrumbItem {
  label: string;
  href?: string;
  icon?: React.ReactNode;
}

type SeparatorType = "slash" | "chevron" | "arrow" | "dot";

type BreadcrumbRenderItem = BreadcrumbItem | { type: "ellipsis" };

interface BreadcrumbsProps {
  items: BreadcrumbItem[];
  separator?: SeparatorType | React.ReactNode;
  maxItems?: number;
  className?: string;
  itemClassName?: string;
  activeClassName?: string;
}

const separatorMap: Record<SeparatorType, string> = {
  slash: "/",
  chevron: "\u203A",
  arrow: "\u2192",
  dot: "\u2022",
};

function getSeparatorContent(separator: SeparatorType | React.ReactNode): React.ReactNode {
  if (typeof separator === "string" && separator in separatorMap) {
    return separatorMap[separator as SeparatorType];
  }
  return separator;
}

function Breadcrumbs({
  items,
  separator = "chevron",
  maxItems = 4,
  className,
  itemClassName,
  activeClassName,
}: BreadcrumbsProps) {
  const separatorContent = getSeparatorContent(separator);
  const [isExpanded, setIsExpanded] = React.useState(false);
  const shouldCollapse = items.length > maxItems && !isExpanded;
  const tailCount = Math.max(maxItems - 2, 1);

  const renderItems: BreadcrumbRenderItem[] = shouldCollapse
    ? [items[0], { type: "ellipsis" }, ...items.slice(-tailCount)]
    : items;

  return (
    <nav aria-label="Breadcrumb" className={cn("flex items-center", className)}>
      <ol className="flex items-center gap-2">
        {renderItems.map((item, index) => {
          const isEllipsis = "type" in item && item.type === "ellipsis";
          const isLast = index === renderItems.length - 1;

          if (isEllipsis) {
            return (
              <li key={`ellipsis-${index}`} className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => setIsExpanded(true)}
                  className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                  aria-label="Show all breadcrumbs"
                >
                  <span aria-hidden="true">...</span>
                </button>
                {!isLast ? (
                  <span
                    className="select-none text-sm text-muted-foreground"
                    aria-hidden="true"
                  >
                    {separatorContent}
                  </span>
                ) : null}
              </li>
            );
          }

          const breadcrumbItem = item as BreadcrumbItem;
          return (
            <li key={`${breadcrumbItem.label}-${index}`} className="flex items-center gap-2">
              {breadcrumbItem.href && !isLast ? (
                <a
                  href={breadcrumbItem.href}
                  className={cn(
                    "flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground",
                    itemClassName
                  )}
                >
                  {breadcrumbItem.icon ? (
                    <span className="flex h-4 w-4 items-center justify-center">
                      {breadcrumbItem.icon}
                    </span>
                  ) : null}
                  <span>{breadcrumbItem.label}</span>
                </a>
              ) : (
                <span
                  className={cn(
                    "flex items-center gap-1.5 text-sm",
                    isLast
                      ? cn("font-medium text-foreground", activeClassName)
                      : cn("text-muted-foreground", itemClassName)
                  )}
                  aria-current={isLast ? "page" : undefined}
                >
                  {breadcrumbItem.icon ? (
                    <span className="flex h-4 w-4 items-center justify-center">
                      {breadcrumbItem.icon}
                    </span>
                  ) : null}
                  <span>{breadcrumbItem.label}</span>
                </span>
              )}
              {!isLast ? (
                <span
                  className="select-none text-sm text-muted-foreground"
                  aria-hidden="true"
                >
                  {separatorContent}
                </span>
              ) : null}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

export { Breadcrumbs };
export type { BreadcrumbsProps };
Breadcrumbs

Dependencies

Files

Installation
