1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Навигация breadcrumbsnavigationux

Minimal Breadcrumbs

Минималистичные хлебные крошки для понятной навигации по иерархии страниц.

Использование

Скопируйте и вставьте этот код на вашу страницу 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>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>

Краткая информация

Категория
Навигация
Имя файла
MinimalBreadcrumbs.astro
Зависимости
Нет — чистый Astro + CSS
Теги
breadcrumbsnavigationux