Para crear un simple menú horizontal en Bootstrap 5 disponemos de la clase "nav", podemos asignar dicha clase a un elemento HTML: nav, ul, div etc. Si queremos respetar el concepto semántico de un menú de navegación es más conveniente utilizar la etiqueta nav.
Las dos clases básicas que debemos utilizar para definir un menú de navegación son:
Vemos un menú de navegación básico implementado con la clase "nav":
<!doctype html> <html> <head> <title>Prueba de Bootstrap 5</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> </head> <body> <div class="container"> <nav class="nav"> <a class="nav-link" href="#">Opción 1</a> <a class="nav-link" href="#">Opción 2</a> <a class="nav-link" href="#">Opción 3</a> <a class="nav-link" href="#">Opción 4</a> <a class="nav-link disabled" href="#">Opción 5</a> </nav> </div> </body> </html>
En el navegador se muestra:
El menú de navegación dispone de 5 enlaces y el quinto se muestra desactivo debido a la clase disabled.
A la etiqueta HTML "nav" le podemos agregar alguna de las siguientes clases para que las opciones aparezcan alineadas:
Empleadas estas clases en una página:
<!doctype html> <html> <head> <title>Prueba de Bootstrap 5</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> </head> <body> <div class="container"> <h2>justify-content-end</h2> <nav class="nav justify-content-end"> <a class="nav-link" href="#">Opción 1</a> <a class="nav-link" href="#">Opción 2</a> <a class="nav-link" href="#">Opción 3</a> <a class="nav-link" href="#">Opción 4</a> <a class="nav-link disabled" href="#">Opción 5</a> </nav> <hr> <h2>justify-content-start</h2> <nav class="nav justify-content-start"> <a class="nav-link" href="#">Opción 1</a> <a class="nav-link" href="#">Opción 2</a> <a class="nav-link" href="#">Opción 3</a> <a class="nav-link" href="#">Opción 4</a> <a class="nav-link disabled" href="#">Opción 5</a> </nav> <hr> <h2>justify-content-center</h2> <nav class="nav justify-content-center"> <a class="nav-link" href="#">Opción 1</a> <a class="nav-link" href="#">Opción 2</a> <a class="nav-link" href="#">Opción 3</a> <a class="nav-link" href="#">Opción 4</a> <a class="nav-link disabled" href="#">Opción 5</a> </nav> <hr> <h2>justify-content-between</h2> <nav class="nav justify-content-between"> <a class="nav-link" href="#">Opción 1</a> <a class="nav-link" href="#">Opción 2</a> <a class="nav-link" href="#">Opción 3</a> <a class="nav-link" href="#">Opción 4</a> <a class="nav-link disabled" href="#">Opción 5</a> </nav> <hr> <h2>justify-content-around</h2> <nav class="nav justify-content-around"> <a class="nav-link" href="#">Opción 1</a> <a class="nav-link" href="#">Opción 2</a> <a class="nav-link" href="#">Opción 3</a> <a class="nav-link" href="#">Opción 4</a> <a class="nav-link disabled" href="#">Opción 5</a> </nav> </div> </body> </html>
En el navegador tenemos el siguiente resultado:
Para mostrar las opciones una debajo del la otra debemos agregar la clase "flex-column" a la etiqueta HTML "nav":
<!doctype html> <html> <head> <title>Prueba de Bootstrap 5</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> </head> <body> <div class="container"> <nav class="nav flex-column"> <a class="nav-link" href="#">Opción 1</a> <a class="nav-link" href="#">Opción 2</a> <a class="nav-link" href="#">Opción 3</a> <a class="nav-link" href="#">Opción 4</a> <a class="nav-link disabled" href="#">Opción 5</a> </nav> </div> </body> </html>
En el navegador tenemos el siguiente resultado: