Una vez que ya hemos visto cómo funcionan los menús de navegación, vamos a encapsularlos en una barra de navegación en bootstrap 4.

Para ello lo primero que vamos a hacer es usar la etiqueta nav con la clase navbar y dentro introduciremos nuestro menú de la siguiente forma, recordando usar la clase navbar-nav en la etiquete ul:

<nav class="navbar">
	<ul class="navbar-nav">
		<li class="nav-item"><a href="#" clas="nav-link">Enlace 1</a></li>
		<li class="nav-item"><a href="#" clas="nav-link">Enlace 2</a></li>
		<li class="nav-item"><a href="#" clas="nav-link">Enlace 3</a></li>
	</ul>	
</nav>

De esta forma le estamos diciendo a bootstrap que se trata de una barra de navegación, pero ahora mismo la barra esta en forma vertical, la forma de hacer que no esté en vertical es usando la clase navbar-expand-[tamaño de la pantalla para que el menú se expanda], por ejemplo; navbar-expand-sm esto hará que siguiendo la filosofía de mobile first que mantiene el framework, el menú se expanda desde el tamaño sm en adelante y este en vertical para abajo.

De esta forma podemos hacer que salte la horizontalidad cuando más nos convenga según la longitud de nuestro menú.

Poner el logo

Una vez que ya tenemos la base de nuestra barra de navegación podemos introducir un logo en la misma.

Para ello justo después de la etiqueta ul podemos utilizar un enlace con la clase navbar-brand donde podemos incluir una imagen, o un texto.

<nav class="navbar navbar-expand-sm">
	<ul class="navbar-nav">
		<a href="#" class="navbar-brand">Logo</a>
		<li class="nav-item"><a href="#" clas="nav-link">Enlace 1</a></li>
		<li class="nav-item"><a href="#" clas="nav-link">Enlace 2</a></li>
		<li class="nav-item"><a href="#" clas="nav-link">Enlace 3</a></li>
	</ul>	
</nav>

Hacer que el menú colapse

Una de las opciones más atractivas de hacer una barra de navegación con bootstrap 4 es hacer que es muy facil convertirlo en responsive. Para ello vamos a mirar el siguiente código:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	<a href="#" class="navbar-brand">Logo</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colapsado">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="colapsado">
		<ul class="navbar-nav">	
			<li class="nav-item"><a href="#" clas="nav-link">Enlace 1</a></li>
			<li class="nav-item"><a href="#" clas="nav-link">Enlace 2</a></li>
			<li class="nav-item"><a href="#" clas="nav-link">Enlace 3</a></li>
			<li class="nav-item"><a href="#" clas="nav-link">Enlace 4</a></li>
		</ul>	
	</div>	
</nav>

Aquí vemos que hemos usado la clase bg-dark y navbar-dark para poder hacer la barra oscura

A continuación hemos introducido el logo y un boton que apunta al menú y que indica su comportamiento cuando este colapsa, incluyendo un span con el icono del toggler.

A continuación hay un div con la con las clases collapse y navbar-collpase con una id a la que apunta el botón.

Anidando elementos

Una vez que ya entendemos como funciona de forma básica la barra de navegación, podemos complicarla añadiéndole submenus anidados, por ejemplo.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
	<a href="#" class="navbar-brand">Logo</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colapsado">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="colapsado">
		<ul class="navbar-nav">	
			<li class="nav-item"><a href="#" clas="nav-link">Enlace 1</a></li>
			<li class="nav-item"><a href="#" clas="nav-link">Enlace 2</a></li>
			<li class="nav-item dropdown">
				<a href="#" clas="nav-link dropdown-toggle" data-toggle="dropdown" id="navbardrop">Enlace 3 +</a>
				<div class="dropdown-menu">
					<a href="#" class="dropdown-item">Subenlace</a>
					<a href="#" class="dropdown-item">Subenlace</a>
					<a href="#" class="dropdown-item">Subenlace</a>
					<a href="#" class="dropdown-item">Subenlace</a>
				</div>
			</li>
		</ul>	
	</div>	
</nav>

Como vemos es igual que hemos trabajado ya a la hora de hacer el menú de forma normal.

Poniendo fijo el menú

Podemos poner nuestra barra de menú fija arriba o abajo utilizando las clases fixed-top o fixed-bottom en la etiqueta nav.

De esta forma tan simple podemos introducir las barras de navegación de bootstrap 4 en nuestros proyectos. Seguro que es mucho más sencillo que hacerlo desde cero!!