Breadcrumb

Since v1.1.0

View source

<nav aria-label="breadcrumb">
  <ol class="c-breadcrumb">
    <li class="c-breadcrumb__item">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="c-breadcrumb">
    <li class="c-breadcrumb__item"><a href="#">Home</a></li>
    <li class="c-breadcrumb__item is-active" aria-current="page">Components</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="c-breadcrumb">
    <li class="c-breadcrumb__item"><a href="#">Home</a></li>
    <li class="c-breadcrumb__item"><a href="#">Components</a></li>
    <li class="c-breadcrumb__item is-active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>

Divider customization

Since the divider between each item is managed with the content rule, you can even pass an image as SVG data.

// Example 1: change it with the ">" character
@forward "@glsass/components/components.breadcrumb" with (
  $c-breadcrumb-divider: ">"
};

// Example 2: use a SVG
@forward "@glsass/components/components.breadcrumb" with (
  $c-breadcrumb-divider: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath d='M3.1 0L1.9 1.2 5.7 5 1.9 8.8 3.1 10l5-5-5-5z'/%3e%3cpath fill='none' d='M0 0h48v48H0V0z'/%3e%3c/svg%3e")
);

caution

Be careful if you want to use an SVG as divider, because the image must be set with width/height attributes (not viewBox) to respect the expected size.