1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación breadcrumbsnavigationux

Minimal Breadcrumbs

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

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { BreadcrumbsMinimal } from 'astro-component-kit';
---

<BreadcrumbsMinimal>
  <a href="/">Home</a>
  <span class="sep">/</span>
  <a href="/docs">Documentation</a>
  <span class="sep">/</span>
  <span class="curr">Navigation</span>
</BreadcrumbsMinimal>
--- import { BreadcrumbsMinimal } from 'astro-component-kit'; --- <BreadcrumbsMinimal> <a href="/">Home</a> <span class="sep">/</span> <a href="/docs">Documentation</a> <span class="sep">/</span> <span class="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/lib/MinimalBreadcrumbs.astro:

astro 
---
---
<nav class="crumbs">
  <a href="/">Home</a>
  <span class="sep">/</span>
  <a href="/docs">Documentation</a>
  <span class="sep">/</span>
  <span class="curr">Navigation</span>
</nav>
<style>
  .crumbs { display: flex; gap: 0.6rem; font-size: 0.8rem; font-weight: 500; }
  .crumbs a { color: #64748b; text-decoration: none; }
  .crumbs a:hover { color: #fff; }
  .sep { color: #334155; }
  .curr { color: #818cf8; font-weight: 700; }
</style>
--- --- <nav class="crumbs"> <a href="/">Home</a> <span class="sep">/</span> <a href="/docs">Documentation</a> <span class="sep">/</span> <span class="curr">Navigation</span> </nav> <style> .crumbs { display: flex; gap: 0.6rem; font-size: 0.8rem; font-weight: 500; } .crumbs a { color: #64748b; text-decoration: none; } .crumbs a:hover { color: #fff; } .sep { color: #334155; } .curr { color: #818cf8; font-weight: 700; } </style>

Información Rápida

Categoría
Navegación
Nombre de archivo
MinimalBreadcrumbs.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
breadcrumbsnavigationux