Dropdown

Muestre al usuario menús desplegables con sus diferentes opciones de selección.

-- Dropdown básico

HTML

Nota Consulta los atributos data disponible para dropdown.

-- Dropdown básico multinivel

HTML

-- Orientación del contenido

Por defecto el contenido de un dropdown está orientado hacia la derecha; para poder cambiar esta dirección utiliza la utilidad .right y de este modo, si el lanzador de contenido esta situado a la derecha, su contenido desplegable apuntará hacia la izquierda, o lo que es lo mismo; hacia dentro del contenedor padre...

HTML - ORIENTACIÓN HACIA LA IZQUIERDA 

    

        ...

-- Dropdown Ancho completo

HTML

-- Dropdown collapse

HTML

-- Dropdown mobile collapse

A diferencia de los anteriores, este tiene diferentes características en su CSS; el punto de colapso se producirá en el establecido para dispositivos móviles; un equivalente al punto de corte tab- (@media screen and min-width:990px).
Sobre la clase dropdown-mobile-collapse tienes un ejemplo de uso en: navbar > navbar collapse.

HTML

-- Dropdown y puntos de corte

Adapta un dropdown al ancho completo indicando en que dispositivo debe hacerlo; como también indicar un punto de colapso en su contenido. Todo esto a través de las utilidades con puntos de corte.

Grupo de clases para ancho completo

  • .tab-dropdown-full
  • .pha-dropdown-full
  • .pho-dropdown-full

Grupo de clases collapse

  • .tab-dropdown-collapse
  • .pha-dropdown-collapse
  • .pho-dropdown-collapse
HTML 

    

        ...

-- Alinea dropdowns con la utilidad .d-inline-block

- Uso de la clase .d-inline-block

.dropdown
.dropdown .d-inline-block

Nota Recuerda que tienes otras opciones para alinear dropdowns en la sección: Botones y paginación

-- Hover y opacity

Destaca el item dónde se encuentre el puntero del mouse, puede utilizar la pseudo-clase :hover para resaltar el item al completo con un fondo de color o usar la propiedad opacity para resaltar solo el texto.

Clases

  • .dropdown-hover
  • .dropdown-opacity
HTML 

    

        ...