Hamburguesa vs. Kebab
Un botón de tres líneas abre la navegación. Un botón de tres puntos abre más acciones para un elemento cercano.
Usa tres líneas para navegación oculta, principalmente en pantallas pequeñas. Usa tres puntos cuando las acciones de elementos adicionales no caben, y llama al botón “Más acciones.”
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Menú hamburguesa
Un botón de menú con tres líneas. Abre la navegación principal del sitio cuando no hay suficiente espacio para mostrarla.
En una página de tienda estrecha, el botón de Menú etiquetado abre categorías, cuenta y ayuda. El cajón mantiene el enfoque dentro.
- Úsalo cuando
- Úselo en pantallas pequeñas después de mantener visibles los destinos más importantes.
- No lo uses cuando
- No escondas toda la navegación en pantallas anchas. El icono también necesita un nombre accesible y un estado expandido.
- Nombre usado en código
button aria-controls aria-expanded + nav
Botón de menú de desbordamiento
Un botón pequeño, que a menudo son tres puntos, abre acciones menos importantes. Úsalo cuando esas acciones no caben en la página.
Cada fila de proyecto muestra Abrir. Duplicar, Archivar y Eliminar están en su menú de desbordamiento.
- Úsalo cuando
- Úsalo cuando un elemento tenga varias acciones secundarias y mostrar todos los botones abarrotaría la página.
- No lo uses cuando
- No escondas la acción principal o un resultado destructivo detrás de un icono sin etiqueta. Deja visible el único camino hacia una tarea común.
- Nombre usado en código
button[aria-haspopup=menu] + role=menu
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| Menú hamburguesaHamburger Menu | Úselo en pantallas pequeñas después de mantener visibles los destinos más importantes. | No escondas toda la navegación en pantallas anchas. El icono también necesita un nombre accesible y un estado expandido. | button aria-controls aria-expanded + nav |
| Botón de menú de desbordamientoOverflow Menu Button | Úsalo cuando un elemento tenga varias acciones secundarias y mostrar todos los botones abarrotaría la página. | No escondas la acción principal o un resultado destructivo detrás de un icono sin etiqueta. Deja visible el único camino hacia una tarea común. | button[aria-haspopup=menu] + role=menu |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Menú hamburguesa (Hamburger Menu), Botón de menú de desbordamiento (Overflow Menu Button) para nuestro flujo de usuario real. Usa esta regla: Un botón de tres líneas abre la navegación. Un botón de tres puntos abre más acciones para un elemento cercano. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.