Estilos

Componentes

Formularios

Organismos

Navegación Horizontal

Permite a las personas usuarias a navegar por las vistas sin salir de la página. Siempre contienen al menos dos elementos y una esta activa a la vez. Generalmente se utilizan en encabezados o secciones grandes.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

Simple


  <nav>
    <ul class="nav flex-row nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="#"><span>Link</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#"><span>Activo</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span>Link</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" aria-disabled="true" tabIndex={-1}>
          <span>Deshabilitado</span>
        </a>
      </li>
    </ul>
  </nav>

Simple con icono


  <nav>
    <ul class="nav flex-row nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="#">
          <div class="nav-icon">
            <i class="bx bxs-user-circle o-icon"></i>
            <span>Link</span>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">
          <div class="nav-icon">
            <i class="bx bxs-user-circle o-icon"></i>
            <span>Activo</span>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <div class="nav-icon">
            <i class="bx bxs-user-circle o-icon"></i>
            <span>Link</span>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" aria-disabled="true" tabindex="-1">
          <div class="nav-icon">
            <i class="bx bxs-user-circle o-icon"></i>
            <span>Deshabilitado</span>
          </div>
        </a>
      </li>
    </ul>
  </nav>



  <nav>
    <ul class="nav flex-row nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="#">
          <div class="nav-icon">
            <span>Link</span>
            <i class="bx bxs-user-circle o-icon"></i>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">
          <div class="nav-icon">
            <span>Activo</span>
            <i class="bx bxs-user-circle o-icon"></i>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <div class="nav-icon">
            <span>Link</span>
            <i class="bx bxs-user-circle o-icon"></i>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" aria-disabled="true" tabindex="-1">
          <div class="nav-icon">
            <span>Deshabilitado</span>
            <i class="bx bxs-user-circle o-icon"></i>
          </div>
        </a>
      </li>
    </ul>
  </nav>

Tamaños


  <nav>
    <ul class="nav flex-row nav-pills">
      <li class="nav-item">
        <a class="nav-link nav-link-lg border-link" href="#"><span>Link</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link border-link" href="#"><span>Link</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link nav-link-sm border-link" href="#"><span>Link</span></a>
      </li>
    </ul>
  </nav>

Con borde


  <nav>
    <ul class="nav flex-row nav-pills">
      <li class="nav-item">
        <a class="nav-link border-link" href="#">
          <div class="nav-icon">
            <i class="bx bxs-user-circle o-icon"></i>
            <span>Link</span>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link border-link active" href="#">
          <div class="nav-icon">
            <i class="bx bxs-user-circle o-icon"></i>
            <span>Activo</span>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link border-link" href="#">
          <div class="nav-icon">
            <i class="bx bxs-user-circle o-icon"></i>
            <span>Link</span>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link border-link disabled"
          href="#"
          aria-disabled="true"
          tabIndex={-1}
        >
          <div class="nav-icon">
            <i class="bx bxs-user-circle o-icon"></i>
            <span>Deshabilitado</span>
          </div>
        </a>
      </li>
    </ul>
  </nav>