Componentes Menús

Menús

Un menú muestra una lista temporal de opciones que aparece al tocar un botón, un campo o un elemento.

Uso

Úsalos para mostrar acciones u opciones secundarias sin ocupar espacio permanente en la pantalla.

Úsalo para

Acciones secundarias de un elemento ("más opciones")
Elegir una opción de una lista en un formulario

Evítalo si

Acciones principales: deben estar a la vista
Más de 10–12 opciones sin agrupar

Principios

Temporales

Aparecen al pedirlos y se cierran al elegir.

Contextuales

Sus opciones dependen de dónde se abrieron.

Ordenados

Las opciones más usadas van arriba.

Tipos

Tipo 01

Desplegable

Se abre desde un botón o ícono.

Jornada

Tipo 02

Desplegable expuesto (select)

Un campo que muestra la opción elegida y abre la lista.

Tipo 03

Contextual

Se abre con clic derecho o presión larga sobre un elemento.

Anatomía

Contenedor
Ícono principal (opcional)
Texto del elemento
Atajo de teclado (opcional)
Divisor de grupo

Comportamiento

Demostración automáticaEl menú se abre junto al botón y se cierra al elegir una opción.

Se abre pegado al elemento que lo llamó, sin taparlo si es posible.
Elegir una opción o tocar fuera lo cierra.
Con teclado: flechas para moverse, Enter para elegir, Esc para cerrar.

Medidas

Medida	Valor de referencia
Alto de cada opción	48 dp (32 dp en escritorio denso)
Ancho	mín. 112 dp, máx. 280 dp
Radio	4 dp
Elevación	8 dp
Margen lateral del texto	16 dp

Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.

Uso