Tabs

Revisa y prueba el componente en código

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

Navegación por pestañas. Usa el bloque BEM .cl-tabs del Kit Digital.

Horizontal

<nav class="cl-tabs" aria-label="Secciones">
  <a class="cl-nav-item cl-nav-item--tab is-current" href="#" aria-current="page">Resumen</a>
  <a class="cl-nav-item cl-nav-item--tab" href="#">Requisitos</a>
  <a class="cl-nav-item cl-nav-item--tab" href="#">Documentos</a>
  <a class="cl-nav-item cl-nav-item--tab" href="#">Contacto</a>
</nav>

Vertical

<nav class="cl-tabs cl-tabs--vertical" aria-label="Secciones">
  <a class="cl-nav-item cl-nav-item--tab cl-nav-item--vertical" href="#">Datos personales</a>
  <a class="cl-nav-item cl-nav-item--tab cl-nav-item--vertical" href="#">Dirección</a>
  <a class="cl-nav-item cl-nav-item--tab cl-nav-item--vertical is-current" href="#" aria-current="page">Salud</a>
  <a class="cl-nav-item cl-nav-item--tab cl-nav-item--vertical" href="#">Educación</a>
</nav>