Breadcrumb

A breadcrumb is like a digital trail of crumbs, guiding users through the labyrinth of a website. It's a handy navigation tool that helps users keep track of their location within a site's hierarchy. With breadcrumbs, users can easily retrace their steps and find their way back to the homepage or a previous page.

Example

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

<nav aria-label="Breadcrumb">
    <ul class="breadcrumb">
        <li class="item"><a href="#" class="link">Home</a></li>
        <li class="item">
            <svg-circle />
        </li>
        <li class="item"><a href="#" class="link">Library</a></li>
        <li class="item">
            <svg-circle />
        </li>
        <li class="item active" aria-current="page">Data</li>
    </ul>
</nav>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$breadcrumb: functions.get-theme(app.$theme, 'components.breadcrumb');

@include mixins.generate-component(
    $breadcrumb,
    "breadcrumb",
    app.$config,
    app.$theme
);

customElements.define("svg-circle", class extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
             fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd"
                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clip-rule="evenodd"/>
        </svg>`;
    }
});

Dividers

Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --xii-breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.

HTML
SCSS

<nav aria-label="breadcrumb">
    <ul class="breadcrumb">
        <li class="item"><a href="#" class="link">Home</a></li>
        <li class="item">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                 fill="currentColor"
                 aria-hidden="true">
                <path fill-rule="evenodd"
                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                      clip-rule="evenodd"/>
            </svg>
        </li>
        <li class="item active" aria-current="page">Library</li>
    </ul>
</nav>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;

@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$breadcrumb: functions.get-theme(app.$theme, 'components.breadcrumb');

@include mixins.generate-component(
    $breadcrumb,
    "breadcrumb",
    app.$config,
    app.$theme
);

Accessibility

Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

For more information, see the ARIA Authoring Practices Guide breadcrumb pattern.