Vamos a hacer un menú dropdown en bootstrap 4 para ello vamos a ver que es muy similar a como lo hicimos con los botones.

De esta forma podemos hacer desplegables con muy pocas líneas de código como vemos en el ejemplo:

<div class="dropdown">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Desplegable</button>
	<div class="dropdown-menu">
		<div class="dropdown-header">sección uno</div>
		<a href="#" class="dropdown-item">Enlace 1</a>
		<a href="#" class="dropdown-item">Enlace 2</a>
		<a href="#" class="dropdown-item">Enlace 3</a>
		<div class="dropdown-divider"></div>
		<div class="dropdown-header">sección dos</div>
		<a href="#" class="dropdown-item">Enlace 4</a>
		<a href="#" class="dropdown-item disabled">Enlace 5</a>
	</div>
</div>

Lo que vemos aquí ,es que introduciendo nuestra clase dropdown podemos en un div podemos empezar a trabajar sobre un elemento que mantenga la clase dropdown-toggle y el atributo data-toggle=»dropdown» 

Tras esto se añade un div con la clase dropdown-menu que contiene los elementos del desplegable. En nuestro ejemplo son enlaces.

Como vemos podemos introducir un div con la clase dropdown-divider que crea un separador dentro del menú y con ello podemos modular nuestros menú.

También se pueden poner cabeceras por medio de la clase dropdpwn-header como vemos el código que tenemos de ejemplo.

Obviamente a los enlaces podemos ponerles puntos de activos o no activos utilizando las clases active o disabled según nuestras necesidades, aunque de forma normal estén como activos. En nuestro ejemplo hemos colocado como disabled el enlace 5.

Pero imaginemos que queremos hacer que nuestro desplegable se abra hacia arriba, para ello hay que ir a la clase principal y cambiar la clase dropdpwn por dropup. Esto hará que siempre que el desplegable tenga espacio para abrirse hacia arriba lo hará, de lo contrario lo hará hacia abajo, y ademas cambia el sentido de la flecha.

<div class="dropup">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Desplegable</button>
	<div class="dropdown-menu">
		<div class="dropdown-header">sección uno</div>
		<a href="#" class="dropdown-item">Enlace 1</a>
		<a href="#" class="dropdown-item">Enlace 2</a>
		<a href="#" class="dropdown-item">Enlace 3</a>
		<div class="dropdown-divider"></div>
		<div class="dropdown-header">sección dos</div>
		<a href="#" class="dropdown-item">Enlace 4</a>
		<a href="#" class="dropdown-item disabled">Enlace 5</a>
	</div>
</div>

En el siguiente gif, aparece como funciona.

Como podemos observar la forma de hacer dropdowns en bootstrap 4  es realmente sencilla y puede dar mucho dinamismo a nuestros proyectos con muy poco esfuerzo.