Vamos a ver como hacer un menú de navegación en bootstrap 4, ya que tenemos conocimientos sobre este framework como para afrontar uno de los elementos más usuales de una web.

Vamos a comenzar viendo el código más sencillo de un menú:

<ul class="nav">
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 2</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li>
</ul>

Cómo vemos se trata de una lista html con la clase nav, la cual le dice a bootstrap que se trata de un menú de navegación.

Seguidamente observamos que que cada elemento de la lista tiene la clase nav-item que dice al framework que ese elemento pertenece al menú padre en el que se encuentra.

Y finalmente vemos que los enlaces del menú mantienen la clase nav-link para diferenciarse del resto de enlaces de la web.

Igual que hemos visto en otras entradas de este curso como en los botones, los enlaces pueden tener la clase disabled.

Alinear el menú

Supongamos que queremos centrar nuestro menú en la pantalla, para ello usaríamos la clase justify-content-center, y nuestro menú estaría centrado en la pantalla.

Si lo queremos a la derecha sería con la clase justify-content-end y si lo queremos forzar a la izquierda se utilizaría la clase justify-content-start 

<ul class="nav justify-content-center">
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 2</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li>
</ul>

Si por ejemplo queremos tener un menú en columna podemos hacerlo utilizando la clase flex-column y los elementos se alinearán verticalmente en lugar de hacerlo en forma horizontal.

<ul class="nav flex-column">
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 2</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li>
</ul>	

Supongamos que queremos es hacer que el menú ocupe todo el ancho de la pantalla usaremos la clase nav-justified

<ul class="nav nav-justified">
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 2</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li>
</ul>

Anidando elementos

Podemos hacer elementos con submenus desplegables utilizando las siguientes clases:

• En el elemento que queremos que se despliegue usamos dropdown para indicar que es un elemento desplegable
• En el enlace se coloca la clase dropdown-toggle para indicar donde hay que clickar para activar el menú desplegable y el atributo data-toggle=»dropdown»
• Creamos un div con la clase dropdpwn-menu que contiene todos los elementos con la clase dropdpwn-item que se colocan directamente en lineas diferentes.

Vale, esto dicho así parece un infierno, pero si lo vemos en código va a resultar mucho más sencillo.

<ul class="nav nav-justified">
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li>
	<li class="nav-item dropdown"><a href="#datepicker.html" class="nav-link dropdown-toggle" data-toggle="dropdown">Enlace 2</a>
		<div class="dropdown-menu">
			<a href="#" class="dropdown-item">Subenlace 1</a>
			<a href="#" class="dropdown-item">Subenlace 2</a>
			<a href="#" class="dropdown-item">Subenlace 3</a>
		</div>
	
	</li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li>
	<li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li>
</ul>

¿A que ahora si lo entendemos todos?

De este modo es muy fácil extrapolarlo a diferentes niveles de profundidad.

En la siguiente entrada veremos como funciona la barra de navegación.