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 aria-label="Navegación horizontal" aria-label='Navegación horizontal'>
<ul class="nav flex-row nav-pills">
<li class="nav-item">
<a class="nav-link" href="#"><span>Navegación</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>Navegación</span></a>
</li>
</ul>
</nav>
Simple con icono
<nav aria-label="Navegación horizontal">
<ul class="nav flex-row nav-pills">
<li class="nav-item">
<a class="nav-link" href="#">
<div class="nav-icon">
<span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
<span>Navegación</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">
<div class="nav-icon">
<span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
<span>Activo</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="nav-icon">
<span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
<span>Navegación</span>
</div>
</a>
</li>
</ul>
</nav>
<nav aria-label="Navegación horizontal">
<ul class="nav flex-row nav-pills">
<li class="nav-item">
<a class="nav-link" href="#">
<div class="nav-icon">
<span>Navegación</span>
<span class="material-symbols-rounded o-icon" aria-label="hidden">arrow_forward</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">
<div class="nav-icon">
<span>Activo</span>
<span class="material-symbols-rounded o-icon" aria-label="hidden">arrow_forward</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="nav-icon">
<span>Navegación</span>
<span class="material-symbols-rounded o-icon" aria-label="hidden">arrow_forward</span>
</div>
</a>
</li>
</ul>
</nav>
Tamaños
<nav aria-label="Navegación horizontal">
<ul class="nav flex-row nav-pills">
<li class="nav-item">
<a class="nav-link nav-link-lg border-link" href="#"><span>Navegación</span></a>
</li>
<li class="nav-item">
<a class="nav-link border-link" href="#"><span>Navegación</span></a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-sm border-link" href="#"><span>Navegación</span></a>
</li>
</ul>
</nav>
Con borde
<nav aria-label="Navegación horizontal">
<ul class="nav flex-row nav-pills">
<li class="nav-item">
<a class="nav-link border-link" href="#">
<div class="nav-icon">
<span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
<span>Navegación</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link border-link active" href="#">
<div class="nav-icon">
<span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
<span>Activo</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link border-link" href="#">
<div class="nav-icon">
<span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
<span>Navegación</span>
</div>
</a>
</li>
</ul>
</nav>