Navigation Rail

Revisa y prueba el componente en código

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

Riel de navegación compacto. Usa el bloque BEM .cl-riel del Kit Digital.

Escritorio

<nav class="cl-riel" aria-label="Principal">
  <ul class="cl-riel__list">
    <li>
      <a class="cl-riel__item" href="#">
        <span class="cl-riel__pill"><span class="cl-riel__icon cl-icon" data-icon="home" aria-hidden="true"></span></span>
        <span class="cl-riel__label">Opción</span>
      </a>
    </li>
  </ul>
</nav>

Móvil

<nav class="cl-riel cl-riel--mobile" aria-label="Principal">
  <ul class="cl-riel__list">
    <li>
      <a class="cl-riel__item" href="#" aria-current="page">
        <span class="cl-riel__pill"><span class="cl-riel__icon cl-icon" data-icon="home" aria-hidden="true"></span></span>
        <span class="cl-riel__label">Inicio</span>
      </a>
    </li>
  </ul>
</nav>

Submenú

<nav class="cl-riel-submenu" aria-label="Submenú">
  <p class="cl-riel-submenu__title">Título del menú (opcional)</p>
  <ul class="cl-riel-submenu__list">
    <li>
      <a class="cl-riel-submenu__item" href="#">
        <span class="cl-riel-submenu__icon cl-icon" data-icon="home" aria-hidden="true"></span>
        <span class="cl-riel-submenu__label">Opción</span>
      </a>
    </li>
  </ul>
</nav>