Skip to main content

Breadcrumbs

Breadcrumbs are useful to indicate the navigational route into a website.

<blaze-breadcrumbs aria-label="Breadcrumbs">
  <blaze-breadcrumb href="/">Home</blaze-breadcrumb>
  <blaze-breadcrumb href="/">Cars</blaze-breadcrumb>
  <blaze-breadcrumb href="/">Electric</blaze-breadcrumb>
  <blaze-breadcrumb href="/">Tesla</blaze-breadcrumb>
  <blaze-breadcrumb>P100d</blaze-breadcrumb>
</blaze-breadcrumbs>

CSS

<nav aria-label="Breadcrumb">
  <ol class="c-breadcrumbs">
    <li class="c-breadcrumbs__crumb">
      <a class="c-link">Home</a>
    </li>
    <li class="c-breadcrumbs__crumb">
      <a class="c-link">Cars</a>
    </li>
    <li class="c-breadcrumbs__crumb">
      <a class="c-link">Electric</a>
    </li>
    <li class="c-breadcrumbs__crumb">
      <a class="c-link">Tesla</a>
    </li>
    <li class="c-breadcrumbs__crumb" aria-current="page">P100d</li>
  </ol>
</nav>