04 Capítulo 4 · Lección 9

Dropdowns y menús

Redactado por

Author

Fecha de publicación

17/07/2025

Tiempo de lectura

6 min

Tema

Interactions

¿Qué son los Dropdowns y Menús?

Un dropdown es un menú oculto que se despliega o revela opciones secundarias cuando el usuario interactúa (hace clic o hover) con un botón disparador. Es el patrón de diseño por excelencia para la navegación compacta y las acciones de usuario.

¿Para qué sirven?

Sirven para conservar el preciado espacio en pantalla (real estate). Si tienes 10 acciones disponibles pero solo 2 son principales, las otras 8 van dentro de un menú de "Opciones".

Navegación limpia: Agrupan enlaces categorizados sin saturar el encabezado de tu sitio web.
Jerarquía de acciones: Esconden opciones peligrosas (Cerrar sesión, Eliminar cuenta) bajo un clic intencional.
Revelación progresiva: Muestran información solo cuando el usuario activamente la requiere.

¿Cómo se usan?

El error más común es hacer que aparezcan de la nada cambiando display: none a display: block. Una interacción mágica utiliza el transform-origin para controlar desde dónde "crece" o "nace" el menú. Si el botón está arriba a la derecha, el menú debe originarse de forma orgánica desde esa esquina (transform-origin: top right) junto con un scale desde 0.95 a 1.

Consejo profesional

Para evitar el clásico problema donde el cursor se sale del botón un píxel y el menú colapsa (súper frustrante), añade padding transparente al menú o usa un pequeño retraso (transition-delay) al desaparecer.

Dropdown con Transform Origin

> _

<div class="dropdown-wrapper">
  <button class="dropdown-btn">
    Opciones 
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
  </button>
  
  <ul class="dropdown-menu">
    <li><a href="#">Perfil de usuario</a></li>
    <li><a href="#">Configuración</a></li>
    <li class="divider"></li>
    <li><a href="#" class="text-danger">Cerrar sesión</a></li>
  </ul>
</div>

.dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px dashed #475569;
  border-radius: 0;
  cursor: pointer;
  font-family: 'afronaut', serif;
}

.dropdown-btn svg { transition: transform 0.2s; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: rgba(255,255,255,0.1);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 0;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  
  /* ESTADO OCULTO */
  opacity: 0;
  visibility: hidden;
  transform-origin: top left;
  transform: scale(0.95) translateY(-10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.95rem;
  font-family: 'afronaut', serif;
}

.dropdown-menu .divider {
  border-top: 1px dashed rgba(255,255,255,0.1);
  margin: 8px 0;
}

.dropdown-menu .text-danger { color: #f87171; }

/* HOVER: Muestra el menú */
.dropdown-wrapper:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.dropdown-wrapper:hover .dropdown-btn svg {
  transform: rotate(180deg);
}

> _

Pasa el cursor sobre el botón para ver cómo el menú se despliega desde la esquina.

Errores comunes

01

Problema del salto (Hover gap) Dejar demasiado espacio entre el botón y el menú, lo que hace que el hover se pierda a mitad de camino y desaparezca.

02

Animaciones súper complejas Animar cada elemento de la lista cayendo en cascada puede ser bonito visualmente, pero si el menú se usa frecuentemente, irritará a los usuarios.

Practica lo aprendido

Crea un menú dropdown con transform-origin que parezca desplegarse naturalmente.

01 Crea el botón y el .menu con position: absolute abajo del botón.

02 Pon el menú en opacity: 0 y visibility: hidden inicialmente.

03 Añade transform-origin: top center y transform: scale(0.95).

04 En :hover del wrapper, lleva opacity a 1 y scale a 1.

05 Prueba cambiando transform-origin para ver el cambio de dirección.