Main Navegación Principal

Revisa y prueba el componente en código

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

Navegación principal de la aplicación. Usa el bloque BEM .cl-nav y el átomo .cl-nav-item.

Barra

<nav class="cl-nav" aria-label="Principal">
  <ul class="cl-nav__list">
    <li><a class="cl-nav-item" href="#">Inicio</a></li>
    <li><a class="cl-nav-item" href="#">Servicios</a></li>
    <li><a class="cl-nav-item" href="#">Trámites</a></li>
    <li><a class="cl-nav-item" href="#">Contacto</a></li>
  </ul>
</nav>

Opción activa

<nav class="cl-nav" aria-label="Principal">
  <ul class="cl-nav__list">
    <li><a class="cl-nav-item is-current" href="#" aria-current="page">Inicio</a></li>
    <li><a class="cl-nav-item" href="#">Servicios</a></li>
    <li><a class="cl-nav-item" href="#">Trámites</a></li>
  </ul>
</nav>