DropdownMenu
El componente permite al usuario seleccionar un parámetro o una acción de una lista de contextos. Se puede acceder a una lista desplegable haciendo clic en un botón con tres puntos. El icono es personalizable y se puede reemplazar. Los usuarios pueden navegar entre los elementos de la lista mediante los controles del teclado.
Estructura
➊ Icono del menú contextual
➋ Artículo de lista
➌ Separador
➍ Submenú chevron
Estados
Tipos de contenido
Tamaño
Icono
El icono del menú contextual tiene cuatro tamaños integrados de forma predeterminada.
Talla S: 24 x 24 píxeles, M: 28 x 28 píxeles, L: 36 x 36 px y XL: 44x44 p.
Anchura del componente
Cuando un elemento del menú es más largo que el objeto que lo activa, el menú se expandirá para que coincida con 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ú supere su ancho máximo, se truncará con puntos suspensivos.
Alcance
Icono de llamada configurable
El icono del menú contextual se puede cambiar de tamaño o reemplazar por uno diferente. El componente usa un botón de tres puntos con un tamaño de 16 px de forma predeterminada.
Icono de elemento de menú opcional
Puede añadir iconos junto a los elementos del menú contextual para ayudar al usuario a entender sus funciones. El tamaño predeterminado del icono en el menú contextual es de 16 x 16 píxeles.
Submenús desplegables anidados
Los elementos del menú contextual se pueden anidar unos dentro de otros. La profundidad de anidación predeterminada está configurada para admitir hasta tres niveles.
Posicionamiento
De forma predeterminada, el menú desplegable aparece debajo del elemento que lo invoca, con el icono del menú en la esquina derecha. Si la interfaz no admite una lista desplegable debajo del icono del conmutador, la lista se expande por encima del icono.
Cerrar el menú contextual
Puede cerrar el menú contextual haciendo clic en el área exterior o pulsando la tecla ESC. De forma predeterminada, el menú se contrae durante el desplazamiento de la página, pero este comportamiento se puede desactivar.
Recomendaciones
Los menús desplegables se utilizan cuando hay al menos dos opciones entre las que elegir. El número óptimo de opciones está entre 5 y 10.
Al organizar los elementos del menú, asegúrese de un orden lógico colocando las opciones más utilizadas y populares en la parte superior. Pruebe diferentes elementos del menú y refinelos según sea necesario.