Fylgja Breadcrumbs
The Fylgja breadcrumbs component provides a simple, accessible way to render breadcrumb navigation.
Installation
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: ">";
}FAQ
How do I mark the current page?
Add aria-current="page" to the current item's link, as shown in the usage examples. This is also how the Accessibility guide recommends handling "current page" state across Fylgja components.
Can I use a custom separator like an icon instead of a character?
The --breadcrumbs-separator variable expects a CSS content value (a string, as in ">"), so you can use any string-based separator, but not directly reference an SVG element through it.
Does this component require a <ol>, or can I use a <ul>?
The styling targets the list itself, so a <ul> would be styled the same way, but it isn't recommended. Breadcrumbs are an ordered sequence, and only <ol> conveys that order to assistive technology; a <ul> doesn't express the order at all.