Dropdown

Una lista desplegable es una interfaz visual que al ser presionada muestra una lista de opciones que puede elegir el visitante.

La funcionalidad de los dropdowns o listas desplegables se logra gracias a Javascript, por lo que no se debe olvidar de agregar los archivos bootstrap.min.js, jquery-3.2.1.slim.min.js y popper.min.js.

El div principal debe definir la clase "dropdown".
Dentro de este div se dispone un "button" que debe tener las clases btn, cuaquier clase contextual que se desee y dropdown-toggle.
El button tambien debe tener un id definido y el atributo data-toggle="dropdown".
La lista de opciones que se mostrarán deben estar agrupadas en un div con la clase "dropdown-menu"
Tambien debe contar con el atributo aria-labelledby, el cual debe tener el valor del id del boton de dicho dropdown.
Las opciones son anclas que deben tener definida la clase "dropdown-item".

Menús desplegables de botones divididos:

Se crea un btn-group, un button para el nombre del boton y el segundo para el dropdown.
El segundo button tiene la clase dropdown-toggle y la clase dropdown-toggle-split para tener el espacio adecuado alrededor del símbolo de intercalación desplegable.

Tamaños:

Para definir el tamaño del dropdown se hace indicando el tamaño del botón: btn-sm, btn-lg o el tamaño por defecto.

Direcciones:

Se puede definir en que dirección del boton se despliega la lista de opciones mediante las clases: dropup, dropright, dropleft y por defecto el dropdown.

Titulos en las listas desplegables:

Se puede agregar un div dentro de las opciones con un mensaje informativo. Para esto se agrega la clase "dropdown-header":

Linea divisoria:

Si se quiere agregar una línea separadora entre opciones se agrega un div vacío con la clase "dropdown-divider":

Formularios:

Una variante es disponer un formulario en vez de una lista de opciones dentro del dropdown.