Breadcrumb

@use '@natachah/vanilla-frontend/scss/components/breadcrumb'

Syntax

To create a breadcrumb navigation, always use <ol> with a class .breadcrumb inside a <nav> tag.

html

<nav aria-label="Breadcrumb navigaton">
    <ol class="breadcrumb">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li aria-current="location">Four</li>
    </ol>
</nav>

css properties

--breadcrumb-divider
--breadcrumb-divider-color
--breadcrumb-gap
--breadcrumb-decoration
--breadcrumb-color
--breadcrumb-hover-color
--breadcrumb-active-color
--breadcrumb-disabled-opacity

WARNING

The custom properties for the breadcrumb is overriding the default ones in the typography setting.