Breadcrumbs.

<nav class="ui-sample ui-breadcrumbs" aria-label="Ruta de navegación"><ol><li><a href="#inicio">Inicio</a></li><li><a href="#kit">Kit</a></li><li aria-current="page">Componentes</li></ol></nav>

<nav class="ui-sample ui-breadcrumbs border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" aria-label="Ruta de navegación"><ol class="grid gap-2"><li><a class="underline underline-offset-4" href="#inicio">Inicio</a></li><li><a class="underline underline-offset-4" href="#kit">Kit</a></li><li aria-current="page">Componentes</li></ol></nav>

export interface BreadcrumbsItem {
  label: string;
  /** Destino del paso; la página actual no lo necesita. */
  href?: string;
  /** Página actual: se muestra como texto con `aria-current="page"`. */
  current?: boolean;
}

const ITEMS: BreadcrumbsItem[] = [
  { label: "Inicio", href: "#inicio" },
  { label: "Kit", href: "#kit" },
  { label: "Componentes", current: true },
];

export interface BreadcrumbsProps {
  /** Pasos de la ruta desde la raíz; el último suele ser la página actual. */
  items?: BreadcrumbsItem[];
  /** Nombre accesible de la navegación (`aria-label`). */
  label?: string;
  className?: string;
}

/**
 * Ruta de navegación (breadcrumbs): los niveles desde la raíz hasta la página actual; se usa en sitios con jerarquía de más de dos niveles.
 *
 * @example <Breadcrumbs items={[{ label: "Inicio", href: "/" }, { label: "Kit", href: "/kit" }, { label: "Acciones", current: true }]} />
 */
export function Breadcrumbs({ items = ITEMS, label = "Ruta de navegación", className }: BreadcrumbsProps) {
  if (!items.length) return null;
  return (
    <nav className={["ui-breadcrumbs", className].filter(Boolean).join(" ")} aria-label={label}>
      <ol>
        {items.map((item, i) =>
          item.current ? (
            <li key={i} aria-current="page">{item.label}</li>
          ) : (
            <li key={i}>{item.href ? <a href={item.href}>{item.label}</a> : item.label}</li>
          ),
        )}
      </ol>
    </nav>
  );
}