Ruta de navegación adaptable

"use client";

import { type CSSProperties } from "react";

/** Ruta de navegación adaptable. React + TypeScript, sin dependencias. Personaliza con variables --gcxb-*. */
export type BreadcrumbItem = { label: string; href?: string };
export type NavegacionBreadcrumbsProps = {
  items?: BreadcrumbItem[];
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcxb-root { box-sizing: border-box; min-width: 0; max-width: 100%; color: var(--gcxb-fg, #202421); font: 400 15px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gcxb-root *, .gcxb-root *::before, .gcxb-root *::after { box-sizing: border-box; }
.gcxb-root button, .gcxb-root input, .gcxb-root textarea, .gcxb-root select { font: inherit; }
.gcxb-root button, .gcxb-root a { -webkit-tap-highlight-color: transparent; }
.gcxb-root :focus-visible { outline: 2px solid var(--gcxb-accent, #25724b); outline-offset: 4px; }
.gcxb-root ::selection { background: var(--gcxb-accent, #25724b); color: #fff; }
.gcxb-root button:disabled { opacity: .5; cursor: not-allowed; }
.gcxb-root svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .gcxb-root *, .gcxb-root *::before, .gcxb-root *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.gcxb-root { width:500px; padding:16px 20px; background:var(--gcxb-bg,#fff); border-radius:8px; }
.gcxb-root ol { list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0; padding:0; }
.gcxb-root li { display:flex; align-items:center; gap:8px; min-width:0; }
.gcxb-root svg { color:#768177; }
.gcxb-root a { padding:10px 4px; color:#536457; text-decoration:none; font-size:13px; overflow-wrap:anywhere; }
.gcxb-root a:hover { text-decoration:underline; text-underline-offset:4px; color:#253e2c; }
.gcxb-root span { font-size:13px; font-weight:600; color:#273d2c; padding:10px 4px; overflow-wrap:anywhere; }`;

export function NavegacionBreadcrumbs({
  items = [
    { label: "Biblioteca", href: "#biblioteca" },
    { label: "Componentes", href: "#componentes" },
    { label: "Navegación" },
  ],
  className = "",
  style,
}: NavegacionBreadcrumbsProps) {
  return (
    <nav
      className={`gcxb-root ${className}`}
      style={style}
      aria-label="Ruta de navegación"
    >
      <style>{CSS}</style>
      <ol>
        {items.map((item, i) => (
          <li key={`${item.label}-${i}`}>
            {i > 0 && (
              <svg
                width="14"
                height="14"
                viewBox="0 0 20 20"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.4"
                aria-hidden="true"
              >
                <path d="m7 4 6 6-6 6" />
              </svg>
            )}
            {item.href && i < items.length - 1 ? (
              <a href={item.href}>{item.label}</a>
            ) : (
              <span aria-current={i === items.length - 1 ? "page" : undefined}>
                {item.label}
              </span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/navegacion-breadcrumbs

import { NavegacionBreadcrumbs } from "./navegacion-breadcrumbs";

export default function Ejemplo() {
  return <NavegacionBreadcrumbs />;
}