Breadcrumb

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Ruta de navegación jerárquica. Usa el bloque BEM .cl-breadcrumbs del Kit Digital.

Básico

<nav class="cl-breadcrumbs" aria-label="Breadcrumb">
  <ol class="cl-breadcrumbs__list">
    <li class="cl-breadcrumbs__item">
      <a class="cl-breadcrumbs__link" href="#">Inicio</a>
      <span class="cl-breadcrumbs__separator cl-icon" data-icon="chevron-right" aria-hidden="true"></span>
    </li>
    <li class="cl-breadcrumbs__item">
      <a class="cl-breadcrumbs__link" href="#">Trámites</a>
      <span class="cl-breadcrumbs__separator cl-icon" data-icon="chevron-right" aria-hidden="true"></span>
    </li>
    <li class="cl-breadcrumbs__item">
      <span class="cl-breadcrumbs__current" aria-current="page">Subsidio eléctrico</span>
    </li>
  </ol>
</nav>

Ruta larga

<nav class="cl-breadcrumbs" aria-label="Breadcrumb">
  <ol class="cl-breadcrumbs__list">
    <li class="cl-breadcrumbs__item">
      <a class="cl-breadcrumbs__link" href="#">Inicio</a>
      <span class="cl-breadcrumbs__separator cl-icon" data-icon="chevron-right" aria-hidden="true"></span>
    </li>
    <li class="cl-breadcrumbs__item">
      <a class="cl-breadcrumbs__link" href="#">Ministerio</a>
      <span class="cl-breadcrumbs__separator cl-icon" data-icon="chevron-right" aria-hidden="true"></span>
    </li>
    <li class="cl-breadcrumbs__item">
      <a class="cl-breadcrumbs__link" href="#">Servicios</a>
      <span class="cl-breadcrumbs__separator cl-icon" data-icon="chevron-right" aria-hidden="true"></span>
    </li>
    <li class="cl-breadcrumbs__item">
      <a class="cl-breadcrumbs__link" href="#">Trámites</a>
      <span class="cl-breadcrumbs__separator cl-icon" data-icon="chevron-right" aria-hidden="true"></span>
    </li>
    <li class="cl-breadcrumbs__item">
      <span class="cl-breadcrumbs__current" aria-current="page">Subsidio eléctrico</span>
    </li>
  </ol>
</nav>