Dropdowns

Estructura básica de dropdowns

Los dropdowns representan uno de los patrones de interfaz más versátiles en Bootstrap, permitiendo mostrar listas de opciones, acciones o enlaces de forma desplegable sin ocupar espacio permanente en la página. Este componente se basa en una arquitectura de tres elementos fundamentales que trabajan en conjunto para crear la funcionalidad desplegable.

Anatomía del dropdown

Todo dropdown en Bootstrap requiere una estructura HTML específica que combina un elemento trigger (disparador) con un menú contenedor. La clase principal .dropdown actúa como el contenedor padre que establece el contexto posicional para el menú desplegable:

<div class="dropdown">
  <!-- Contenido del dropdown -->
</div>

Este contenedor .dropdown es esencial para el correcto funcionamiento ya que establece la posición relativa necesaria para que el menú se posicione correctamente respecto al botón trigger.

El elemento trigger con dropdown-toggle

El botón disparador utiliza la clase .dropdown-toggle junto con atributos de datos específicos para activar la funcionalidad desplegable. Este elemento puede ser un botón tradicional, un enlace, o cualquier elemento interactivo:

<button class="btn btn-secondary dropdown-toggle" type="button" 
        data-bs-toggle="dropdown" aria-expanded="false">
  Opciones de usuario
</button>

La clase .dropdown-toggle añade automáticamente el icono de flecha descendente (caret) que indica visualmente al usuario que el elemento es desplegable. El atributo data-bs-toggle="dropdown" es fundamental ya que indica a Bootstrap que este elemento debe activar la funcionalidad de dropdown.

El menú desplegable con dropdown-menu

El contenedor del menú utiliza la clase .dropdown-menu y contiene todos los elementos que aparecerán cuando se active el dropdown. Este menú permanece oculto por defecto y se muestra al interactuar con el trigger:

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Perfil</a></li>
  <li><a class="dropdown-item" href="#">Configuración</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Cerrar sesión</a></li>
</ul>

Los elementos individuales del menú utilizan la clase .dropdown-item que proporciona el espaciado, colores y efectos hover apropiados. Esta clase puede aplicarse a enlaces (<a>), botones (<button>) o cualquier elemento interactivo dentro del menú.

Ejemplo completo básico

Un dropdown completamente funcional combina todos estos elementos en una estructura cohesiva:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" aria-expanded="false">
    Acciones
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Editar</a></li>
    <li><a class="dropdown-item" href="#">Duplicar</a></li>
    <li><a class="dropdown-item" href="#">Eliminar</a></li>
  </ul>
</div>

Elementos de organización del menú

Bootstrap proporciona elementos adicionales para organizar mejor el contenido del menú desplegable:

Divisores con .dropdown-divider crean separaciones visuales entre grupos de elementos:

<li><hr class="dropdown-divider"></li>

Headers con .dropdown-header permiten añadir títulos descriptivos que no son interactivos:

<li><h6 class="dropdown-header">Acciones principales</h6></li>
<li><a class="dropdown-item" href="#">Editar</a></li>
<li><a class="dropdown-item" href="#">Guardar</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Acciones peligrosas</h6></li>
<li><a class="dropdown-item text-danger" href="#">Eliminar</a></li>

Estados de los elementos dropdown

Los elementos .dropdown-item pueden presentar diferentes estados visuales utilizando clases adicionales:

Estado activo con .active indica el elemento actualmente seleccionado:

<li><a class="dropdown-item active" href="#">Opción actual</a></li>

Estado deshabilitado con .disabled muestra elementos no disponibles:

<li><a class="dropdown-item disabled" href="#">Opción no disponible</a></li>

Consideraciones de accesibilidad

Bootstrap incluye automáticamente atributos de accesibilidad esenciales. El atributo aria-expanded="false" en el trigger se actualiza automáticamente para reflejar el estado del dropdown, y la funcionalidad de teclado (tecla Escape para cerrar, navegación con flechas) está integrada nativamente en el componente.

La estructura semántica utilizando listas <ul> y elementos <li> proporciona un contexto claro para lectores de pantalla, aunque también es posible utilizar elementos <div> si la semántica de lista no es apropiada para el contenido específico.

Variaciones de estilo y direcciones

Los dropdowns de Bootstrap ofrecen flexibilidad total en cuanto a su posicionamiento y apariencia visual, permitiendo adaptarse a cualquier contexto de diseño mediante clases específicas que modifican tanto la dirección de despliegue como el estilo visual del componente.

Direcciones de despliegue

Bootstrap proporciona cuatro direcciones principales para el despliegue de dropdowns, cada una controlada por una clase específica que reemplaza la clase base .dropdown:

Dropdown hacia arriba (Dropup) utiliza la clase .dropup para hacer que el menú aparezca encima del trigger, útil cuando el botón está cerca del borde inferior de la pantalla:

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
  </ul>
</div>

Dropdown hacia la derecha (Dropend) emplea .dropend para desplegar el menú horizontalmente hacia la derecha del trigger:

<div class="dropend">
  <button class="btn btn-secondary dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
  </ul>
</div>

Dropdown hacia la izquierda (Dropstart) utiliza .dropstart para que el menú aparezca hacia la izquierda, requiriendo una estructura ligeramente diferente donde el menú precede al botón en el HTML:

<div class="dropstart">
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
  </ul>
  <button class="btn btn-secondary dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
</div>

Alineación del menú desplegable

Independientemente de la dirección principal, Bootstrap permite controlar la alineación del menú respecto al trigger usando clases adicionales en .dropdown-menu:

Alineación a la derecha con .dropdown-menu-end hace que el menú se alinee por su borde derecho con el trigger:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" aria-expanded="false">
    Alineado a la derecha
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Perfil</a></li>
    <li><a class="dropdown-item" href="#">Configuración</a></li>
    <li><a class="dropdown-item" href="#">Cerrar sesión</a></li>
  </ul>
</div>

Alineación responsive

Las alineaciones pueden ser responsive utilizando las clases con breakpoints, permitiendo diferentes comportamientos según el tamaño de pantalla:

<ul class="dropdown-menu dropdown-menu-sm-end dropdown-menu-lg-start">
  <li><a class="dropdown-item" href="#">Elemento 1</a></li>
  <li><a class="dropdown-item" href="#">Elemento 2</a></li>
</ul>

Esta configuración alinea el menú a la derecha en pantallas pequeñas (sm) y medianas, pero lo alinea a la izquierda en pantallas grandes (lg).

Variaciones de estilo del menú

Bootstrap ofrece personalización visual del dropdown-menu mediante clases adicionales:

Dropdown menu oscuro con .dropdown-menu-dark aplica una paleta de colores oscura al menú completo:

<ul class="dropdown-menu dropdown-menu-dark">
  <li><a class="dropdown-item" href="#">Acción</a></li>
  <li><a class="dropdown-item" href="#">Otra acción</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Algo más</a></li>
</ul>

Esta clase ajusta automáticamente los colores de fondo, texto, divisores y efectos hover para mantener la coherencia visual en interfaces oscuras.

Botones split con dropdown

Los botones divididos combinan una acción principal con un dropdown secundario, utilizando dos elementos button dentro del mismo contenedor:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Acción principal</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" 
          data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Opción secundaria</a></li>
    <li><a class="dropdown-item" href="#">Otra opción</a></li>
  </ul>
</div>

La clase .dropdown-toggle-split reduce el espaciado del botón dropdown y .visually-hidden proporciona contexto para tecnologías asistivas sin afectar la presentación visual.

Combinaciones prácticas

Las variaciones pueden combinarse para crear soluciones específicas según el contexto:

<!-- Dropup con alineación a la derecha y estilo oscuro -->
<div class="dropup">
  <button class="btn btn-outline-light dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" aria-expanded="false">
    Menú de usuario
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark">
    <li><h6 class="dropdown-header">Mi cuenta</h6></li>
    <li><a class="dropdown-item" href="#">Ver perfil</a></li>
    <li><a class="dropdown-item" href="#">Editar datos</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Cerrar sesión</a></li>
  </ul>
</div>

Consideraciones de posicionamiento automático

Bootstrap incluye detección automática de colisiones que ajusta la posición del dropdown cuando no hay suficiente espacio en la dirección especificada. Por ejemplo, un .dropup cerca del borde superior se convertirá automáticamente en un dropdown normal, y un .dropend cerca del borde derecho se ajustará hacia la izquierda.

Esta funcionalidad garantiza la usabilidad sin requerir configuración adicional, manteniendo siempre el menú visible y accesible independientemente de la posición del trigger en la ventana del navegador.

Dropdowns con botones y navegación

La integración de dropdowns con sistemas de botones y elementos de navegación representa uno de los casos de uso más comunes y versátiles del componente, permitiendo crear interfaces más ricas y funcionales sin comprometer la limpieza visual de la página.

Dropdowns en grupos de botones

Los grupos de botones proporcionan el contexto perfecto para incorporar dropdowns como parte de toolbars o barras de herramientas. La clase .btn-group permite agrupar múltiples botones junto con dropdowns manteniendo la cohesión visual:

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Guardar</button>
  <button type="button" class="btn btn-primary">Editar</button>
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" 
            data-bs-toggle="dropdown" aria-expanded="false">
      Más acciones
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Duplicar</a></li>
      <li><a class="dropdown-item" href="#">Exportar</a></li>
      <li><a class="dropdown-item" href="#">Compartir</a></li>
    </ul>
  </div>
</div>

Esta configuración es especialmente útil para barras de herramientas donde las acciones principales están visibles mientras que las secundarias se agrupan en el dropdown, optimizando el uso del espacio disponible.

Dropdowns con diferentes estilos de botones

Los dropdowns pueden utilizar cualquier variante de botón de Bootstrap, adaptándose al contexto visual de la interfaz:

<!-- Dropdown con botón outline -->
<div class="dropdown">
  <button class="btn btn-outline-success dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" aria-expanded="false">
    Estado del proyecto
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">En progreso</a></li>
    <li><a class="dropdown-item" href="#">Completado</a></li>
    <li><a class="dropdown-item" href="#">En pausa</a></li>
    <li><a class="dropdown-item" href="#">Cancelado</a></li>
  </ul>
</div>

<!-- Dropdown con botón pequeño -->
<div class="dropdown">
  <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" aria-expanded="false">
    Filtros
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Por fecha</a></li>
    <li><a class="dropdown-item" href="#">Por categoría</a></li>
    <li><a class="dropdown-item" href="#">Por autor</a></li>
  </ul>
</div>

Dropdowns en navegación con navs

La integración con elementos nav permite crear menús de navegación jerárquicos donde algunos elementos contienen subopciones. Los dropdowns se incorporan naturalmente dentro de la estructura .nav:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Inicio</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Productos</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button" 
       data-bs-toggle="dropdown" aria-expanded="false">
      Servicios
    </a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Consultoría</a></li>
      <li><a class="dropdown-item" href="#">Soporte técnico</a></li>
      <li><a class="dropdown-item" href="#">Formación</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contacto</a>
  </li>
</ul>

En este contexto, la clase .nav-item se combina con .dropdown para crear un elemento de navegación desplegable que mantiene la coherencia visual con el resto de la navegación.

Dropdowns en navbars

Los navbars representan el caso más común para dropdowns de navegación, especialmente útiles para menús de usuario, configuraciones o secciones con múltiples subsecciones:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    
    <div class="navbar-nav ms-auto">
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" 
           data-bs-toggle="dropdown" aria-expanded="false">
          Mi cuenta
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Ver perfil</a></li>
          <li><a class="dropdown-item" href="#">Configuración</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Cerrar sesión</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

La clase .dropdown-menu-end asegura que el menú se alinee correctamente con el borde derecho del navbar, especialmente importante cuando el dropdown está posicionado en el extremo derecho de la barra de navegación.

Dropdowns múltiples en navbar

Un navbar puede contener múltiples dropdowns para organizar diferentes categorías de navegación:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Dashboard</a>
    
    <div class="navbar-nav">
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" 
           data-bs-toggle="dropdown" aria-expanded="false">
          Gestión
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Usuarios</a></li>
          <li><a class="dropdown-item" href="#">Productos</a></li>
          <li><a class="dropdown-item" href="#">Categorías</a></li>
        </ul>
      </div>
      
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" 
           data-bs-toggle="dropdown" aria-expanded="false">
          Informes
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Ventas</a></li>
          <li><a class="dropdown-item" href="#">Inventario</a></li>
          <li><a class="dropdown-item" href="#">Usuarios activos</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Dropdowns como selectores de contexto

Los dropdowns pueden funcionar como selectores de contexto en interfaces administrativas, permitiendo al usuario cambiar entre diferentes vistas o filtros:

<div class="d-flex align-items-center mb-3">
  <span class="me-2">Ver datos de:</span>
  <div class="dropdown">
    <button class="btn btn-outline-primary dropdown-toggle" type="button" 
            data-bs-toggle="dropdown" aria-expanded="false">
      Este mes
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item active" href="#">Este mes</a></li>
      <li><a class="dropdown-item" href="#">Último trimestre</a></li>
      <li><a class="dropdown-item" href="#">Este año</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Personalizado</a></li>
    </ul>
  </div>
</div>

Patrones de uso con iconos

La combinación con iconos mejora significativamente la usabilidad y comprensión de los dropdowns en contextos de navegación:

<div class="dropdown">
  <button class="btn btn-light dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" aria-expanded="false">
    ⚙️ Configuración
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">🔔 Notificaciones</a></li>
    <li><a class="dropdown-item" href="#">🔒 Privacidad</a></li>
    <li><a class="dropdown-item" href="#">🎨 Apariencia</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">❓ Ayuda</a></li>
  </ul>
</div>

Dropdowns en toolbars responsivas

Para interfaces que deben adaptarse a diferentes tamaños de pantalla, los dropdowns pueden agrupar acciones que normalmente estarían visibles en pantallas grandes:

<div class="d-flex justify-content-between align-items-center">
  <h2>Lista de productos</h2>
  
  <!-- Visible en pantallas grandes -->
  <div class="d-none d-md-flex">
    <button class="btn btn-success me-2">Nuevo producto</button>
    <button class="btn btn-outline-primary me-2">Importar</button>
    <button class="btn btn-outline-secondary">Exportar</button>
  </div>
  
  <!-- Visible en pantallas pequeñas -->
  <div class="dropdown d-md-none">
    <button class="btn btn-primary dropdown-toggle" type="button" 
            data-bs-toggle="dropdown" aria-expanded="false">
      Acciones
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li><a class="dropdown-item" href="#">Nuevo producto</a></li>
      <li><a class="dropdown-item" href="#">Importar</a></li>
      <li><a class="dropdown-item" href="#">Exportar</a></li>
    </ul>
  </div>
</div>

Consideraciones de navegación por teclado

Los dropdowns integrados en navegación mantienen automáticamente la funcionalidad de teclado estándar: las teclas de flecha permiten navegar entre elementos del menú, Enter activa el enlace seleccionado, y Escape cierra el dropdown, proporcionando una experiencia accesible sin configuración adicional.

La integración natural de dropdowns con sistemas de botones y navegación permite crear interfaces más sofisticadas mientras se mantiene la simplicidad de implementación característica de Bootstrap.