1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegaciónbreadcrumbsnavigationux

Minimal Breadcrumbs

Ruta de navegación con separadores sutiles y enlaces a niveles superiores.

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { BreadcrumbsMinimal } from 'react-component-kit-ui/navigation';

<BreadcrumbsMinimal>
  <a href="/">Home</a>
  <span className="sep">/</span>
  <a href="/docs">Documentation</a>
  <span className="sep">/</span>
  <span className="curr">Navigation</span>
</BreadcrumbsMinimal>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/BreadcrumbsMinimal.tsx + BreadcrumbsMinimal.css:

BreadcrumbsMinimal.tsx
'use client';

import './BreadcrumbsMinimal.css';

/** BreadcrumbsMinimal — ported from astro-component-kit. */
export interface BreadcrumbsMinimalProps {
}

export function BreadcrumbsMinimal({}: BreadcrumbsMinimalProps) {
  return (
    <>
      <nav className="crumbs" data-rk-a2645c="">
        <a href="/" data-rk-a2645c="">Home</a>
        <span className="sep" data-rk-a2645c="">/</span>
        <a href="/docs" data-rk-a2645c="">Documentation</a>
        <span className="sep" data-rk-a2645c="">/</span>
        <span className="curr" data-rk-a2645c="">Navigation</span>
      </nav>
    </>
  );
}

export default BreadcrumbsMinimal;
BreadcrumbsMinimal.css
/* BreadcrumbsMinimal — ported from astro-component-kit (navigation/BreadcrumbsMinimal.astro) */

.crumbs:where([data-rk-a2645c]) { display: flex; gap: 0.6rem; font-size: 0.8rem; font-weight: 500; }
.crumbs:where([data-rk-a2645c]) a:where([data-rk-a2645c]) { color: #64748b; text-decoration: none; }
.crumbs:where([data-rk-a2645c]) a:hover:where([data-rk-a2645c]) { color: #fff; }
.sep:where([data-rk-a2645c]) { color: #334155; }
.curr:where([data-rk-a2645c]) { color: #818cf8; font-weight: 700; }

Información Rápida

Categoría
Navegación
Nombre de archivo
BreadcrumbsMinimal.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
breadcrumbsnavigationux