Breadcrumb

The Breadcrumb component uses basic text styles by default.

The component may also use navigation text styles. Apply the appropriate class to the root element of the navigation component.

Use env-breadcrumb__separator in combination with aria-hidden="true" to hide the separator character from assistive technology.

<nav aria-label="Breadcrumb">
   <ol class="env-breadcrumb">
      <li class="env-breadcrumb__item">
         <a href="#">Root node</a>
         <span aria-hidden="true" class="env-breadcrumb__separator">/</span>
      </li>
      <li class="env-breadcrumb__item">
         <a href="#">Parent node</a>
         <span aria-hidden="true" class="env-breadcrumb__separator">/</span>
      </li>
      <li class="env-breadcrumb__item" aria-current="page">Current</li>
   </ol>
</nav>