import * as React from "react"; import { cn } from "@kineticui/core"; import { ChevronRightIcon } from "@kineticui/icons"; export type BreadcrumbItem = { label: React.ReactNode; href?: string }; export type BreadcrumbProps = { items: BreadcrumbItem[]; /** "/" or "chevron". */ separator?: "slash" | "chevron"; /** Collapse middle items into "…" when there are more than this many. */ maxItems?: number; className?: string; /** Custom link renderer, e.g. Next.js Link. */ renderLink?: (item: BreadcrumbItem, className: string) => React.ReactNode; }; export function Breadcrumb({ items, separator = "chevron", maxItems = 5, className, renderLink }: BreadcrumbProps) { const visible: (BreadcrumbItem | "…")[] = items.length > maxItems ? [items[0]!, "…", ...items.slice(-(maxItems - 2))] : items; const linkClass = "text-muted transition-colors hover:text-foreground"; return (

{item === "…" ? ( … ) : last ? ( {item.label} ) : item.href ? ( renderLink ? ( renderLink(item, linkClass) ) : ( {item.label} ) ) : ( {item.label} )} {!last ? ( separator === "slash" ? ( / ) : ( ) ) : null}

); }

Breadcrumb

Installation

Exports