Navigation breadcrumbsnavigationux

Minimal Breadcrumbs

Lean navigation path indicator with subtle separators.

Usage

Copy the full block below to use this component with its imports.

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>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/MinimalBreadcrumbs.astro and paste the following code:

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>

Quick Info

Category
Navigation
Filename
MinimalBreadcrumbs.astro
Dependencies
None — pure Astro + CSS
Tags
breadcrumbsnavigationux