Breadcrumbs

The breadcrumbs component is a navigational aid, it allows users to maintain awareness of their location in an app or a website.

Installation

npm install @fylgja/breadcrumbs

Then include the component in to your code via;

@use "@fylgja/breadcrumbs";
// Or via PostCSS import
@import "@fylgja/breadcrumbs";

@layer support

If you need support for @layer, use the following import;

@use "@fylgja/breadcrumbs" with ($breadcrumbs-layer: "components");
// Or via PostCSS and other options as native CSS
@import "@fylgja/breadcrumbs" layer(components);

How to use

In your html for the breadcrumb class, you also need some html for the items.

We advice you to use of an ordered list, as this tells the user the structure of the list of links.

<nav aria-label="breadcrumb">
    <ol class="breadcrumbs">
        <li><a href="/">Home</a></li>
        <li><a href="/#path">Path</a></li>
        <li><a href="/#path-deeper" aria-current="page">Cool Page</a></li>
    </ol>
</nav>

Using an anchor for the current page allows your user to reload the page via the breadcrumbs.

And most voiceovers tools will also speak the list items.

Using the aria-current="page" will tell the user that this is the current page.

It is also used to give anchor links a different style compared to the rest of the breadcrumb items.

By default this is a black grayish text, still clickable if an anchor is used

Config

As with almost all of our components, CSS variables can be configured to add your own look/style.

Want direct control on the base styles, here are the following SCSS variables can you modify.

$breadcrumbs-divider: "  /  " !default;
$breadcrumbs-flow: row wrap !default;
$breadcrumbs-margin: 10px 0 !default;
$breadcrumbs-padding: 0 !default;
$breadcrumbs-color: inherit !default;
$breadcrumbs-current-color: var(--color-text-alt, #{$color-text-alt}) !default;
$breadcrumbs-divider-color: #ccc !default;