Bootstrap5 Navegación

Si deseas crear una barra de navegación horizontal simple, puedes<ul>agregar en el elemento.navla clase, en cada<li>elemento agregar.nav-itemla clase, en cada enlace agregar.nav-linkla clase:

Ejemplo

<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

Pruébalo »

Alineación de la navegación

.justify-content-centerla clase establece la navegación centrada,.justify-content-endla clase establece la navegación alineada a la derecha.

Ejemplo

<!--Navegación centrada--> <ul class="nav justify-content-center"> <!--Navegación alineada a la derecha--> <ul class="nav justify-content-end"> </div>

Pruébalo »

Navegación vertical

.flex-columnla clase se usa para crear una navegación vertical:

Ejemplo

<ul class="nav flex-column">

Pruébalo »

Pestañas

Usa.nav-tabsla clase puede convertir la navegación en pestañas. Luego usa la clase .active para marcar la opción seleccionada.

Ejemplo

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

Pruébalo »

Navegación de píldoras

.nav-pillsla clase puede dar forma de píldora a los elementos de navegación.

Ejemplo

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

Pruébalo »

Navegación de ancho igual

.nav-justifiedla clase puede hacer que los elementos de navegación se muestren justificados y de igual ancho.

Ejemplo

<ul class="nav nav-pills nav-justified">..</ul> <ul class="nav nav-tabs nav-justified">..</ul>

Pruébalo »

Menú desplegable de píldoras

Ejemplo

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

Pruébalo »

Menú desplegable de pestañas

Ejemplo

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

Pruébalo »

Pestañas dinámicas

Si deseas que las pestañas sean dinámicas y conmutables, puedes agregar en cada enlacedata-bs-toggle="tab"el atributo..tab-paneLuego, en el contenido correspondiente a cada pestaña, agrega<div>la clase, y la etiqueta del contenido correspondiente a las pestañas.tab-contentusa

la clase..tab-paneSi deseas un efecto de desvanecimiento, puedes .fadeagregar después

Ejemplo

<!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Pruébalo »

Pestañas dinámicas tipo píldora

Las pestañas dinámicas tipo píldora solo necesitan establecer el atributo data-bs-toggle en el código del ejemplo anterior adata-bs-toggle="pill":

Ejemplo

<!-- Nav pills --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Pruébalo »
Otras extensiones