Fylgja breadcrumbs

The Fylgja breadcrumbs component provides a simple, accessible way to render breadcrumb navigation.

Installation

You can install Fylgja breadcrumbs via npm or other Node-based package managers like pnpm or bun:

npm install @fylgja/breadcrumbs

Alternatively, you can use it directly via a CDN:

<link href="https://cdn.jsdelivr.net/npm/@fylgja/breadcrumbs/index.min.css" rel="stylesheet">

Usage

Once installed, you can import the full package with:

@import "@fylgja/breadcrumbs";

Basic Usage

Add the .breadcrumbs class to your list. Wrap it in a <nav> element with a descriptive aria-label (its exact wording doesn't matter, it's only for accessibility, not styling).

<nav aria-label="Breadcrumb">
  <ol class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#" aria-current="page">Current Page</a></li>
  </ol>
</nav>

Customization

The breadcrumbs component uses CSS variables for easy customization. You can override these variables to match your design system.

| Variable | Default | Description | |----------|---------|-------------| | --breadcrumbs-gap | 0.5rem | The space between breadcrumb items. | | --breadcrumbs-separator | "/" | The character or string used as a separator. |

Example

.breadcrumbs {
    --breadcrumbs-gap: 1rem;
    --breadcrumbs-separator: ">";
}