El componente permite al usuario seleccionar un parámetro o acción de una lista contextual. Se puede acceder a una lista desplegable haciendo clic en un botón con tres puntos. El icono es personalizable y puede ser reemplazado. Los usuarios pueden navegar entre los elementos de la lista utilizando los controles del teclado.

§Estructura

➊ Icono del menú contextual ➋ Elemento de la lista ➌ Separador ➍ Chevron de submenú

§Estados

§Tipos de contenido

§Tamaño

Icono

El icono del menú contextual tiene cuatro tamaños integrados por defecto.

Tamaño S: 24x24 px, M: 28x28 px, L: 36x36 px y XL: 44x44 px.

Ancho del componente

Cuando un elemento del menú es más largo que el objeto que lo activa, el menú se expandirá para igualar el ancho del elemento más largo de la lista. El ancho máximo del componente es de 280 px. Cuando el texto de un elemento del menú excede su ancho máximo, se truncará con puntos suspensivos.

§Alcance

Icono de llamada configurable

El icono del menú contextual se puede redimensionar o reemplazar por otro diferente. El componente utiliza por defecto un botón de tres puntos de 16 px.

Icono opcional del elemento del menú

Puedes añadir iconos junto a los elementos del menú contextual para ayudar al usuario a comprender sus funciones. El tamaño por defecto del icono en el menú contextual es de 16x16 px.

Submenús desplegables anidados

Los elementos del menú contextual pueden anidarse unos dentro de otros. La profundidad de anidamiento por defecto está configurada para soportar hasta tres niveles.

Posicionamiento

Por defecto, el menú desplegable aparece debajo del elemento que lo invoca, con el icono del menú en la esquina derecha. Si la interfaz no soporta una lista desplegable debajo del icono del interruptor, la lista se expande por encima del icono.

Cierre del menú contextual

Puedes cerrar el menú contextual haciendo clic en el área exterior o presionando la tecla ESC. Por defecto, el menú se colapsa durante el desplazamiento de la página, pero este comportamiento se puede deshabilitar.

§Recomendaciones

Los menús desplegables se utilizan cuando hay al menos dos opciones para elegir. El número óptimo de opciones está entre 5 y 10.

Al organizar los elementos del menú, asegúrate de un orden lógico colocando las opciones más utilizadas y populares en la parte superior. Prueba diferentes elementos del menú y refínalos según sea necesario.