# AX - Menú de botones ## Visión general **AX - Menú de botón** es un componente de Experience Cloud que muestra un menú desplegable cuando los usuarios hacen clic en un botón en las páginas de Experience Sites. Úsalo para agrupar acciones relacionadas u opciones de navegación bajo un solo botón —como acciones de cuenta de usuario, enlaces rápidos, opciones de exportación o acciones sobre registros. Configura los elementos del menú manualmente o extráelos dinámicamente desde los datos de Salesforce en Experience Builder. Perfecto para navegación compacta, menús de desbordamiento, acciones de perfil de usuario, operaciones en masa o cualquier lugar donde necesites múltiples opciones sin sobrecargar la página con botones separados. ## Configuración del Menú de Botón El componente Menú de Botón te permite crear un menú desplegable activado por el clic de un botón. Aquí tienes cómo puedes personalizarlo para adaptarlo a las necesidades de tu sitio: ### **Etiqueta** * **Qué hace:** Establece el texto que aparece en el botón. * **Ejemplo:** "Navegación", "Acciones", "Más información."
### **Icono** * **Qué hace:** Añade un icono visual al botón. * **Cómo usar:** Elige entre los iconos disponibles en el Lightning Design System. * **Opcional:** Puedes dejar esto en blanco si no quieres un icono.
### **Estilo de botón** * **Qué hace:** Cambia la apariencia del botón para que coincida con el aspecto y la sensación de tu sitio. * **Opciones:** * Neutro * Marca * Destructivo (para acciones como eliminar) * Éxito (para acciones positivas) * Más...
Ajustar la configuración de apariencia te permite personalizar aún más el aspecto de tu botón. Por ejemplo, puedes elegir la variante "Contenedor" para cambiar el color de fondo del botón a tu gusto o seleccionar el token de color predefinido para tu sitio.
### **Alineación del menú** * **Qué hace:** Determina dónde aparece el menú desplegable en relación con el botón. * **Opciones:** * Izquierda * Derecha * Centro * Inferior-izquierda * Más...
### **Disparador del menú** * **Qué hace:** Controla cómo se abre el menú. * **Opciones:** * Clic * Pasar el ratón (abrir al pasar el cursor) * Enfoque (abrir al enfocarse con el teclado)

Disparador del menú configurado en Pasar el ratón

### **Tooltip** * **Qué hace:** Muestra información útil cuando los usuarios pasan el cursor sobre el botón. * **Opcional:** Deja en blanco si no se necesita explicación adicional.
### **Ocultar flecha hacia abajo** * **Qué hace:** Elimina la flecha apuntando hacia abajo que normalmente se muestra en los botones de menú. * **Opcional:** Marca esta casilla si prefieres un aspecto más limpio.
### **Estirar a ancho completo** * **Qué hace:** Hace que el botón se expanda para ocupar todo el ancho disponible. * **Opcional:** Marca esta casilla si deseas un botón más grande. ### **Desactivar botón** * **Qué hace:** Hace que el botón y el menú sean inutilizables temporalmente. * **Opcional:** Marca esta casilla para evitar que los usuarios interactúen con él.,
### **Nubbin del menú** * El nubbin del menú es un pequeño y sutil triángulo junto a los elementos del menú dentro de un menú de botón. * Conecta visualmente el elemento del menú con el botón que abre el menú, guiando la vista del usuario. * Esto ayuda a los usuarios a identificar rápidamente cuál elemento del menú está asociado con un botón en particular, mejorando la experiencia de usuario en general.
### **Elementos del menú** * **Qué hace:** Define los enlaces o acciones en el menú desplegable. * **Cómo usar:** Agrega elementos con etiquetas (el texto mostrado) y un icono si es necesario.
#### Configurar navegación del elemento Para que tu menú de botón sea interactivo, necesitas indicar a cada elemento del menú a dónde ir cuando alguien hace clic en él. Esto se hace en la sección "Vincular a". Puedes obtener más información sobre el [diferentes tipos de acciones](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/tutoriales/interacciones) que puedes activar desde el menú de botón aquí.
*** ## **Configuración de apariencia** Estas configuraciones te permiten personalizar visualmente tu menú de botón para que coincida con el diseño y la marca de tu sitio. ### **Espaciado** * **Qué hace:** Controla el espacio alrededor del botón. * **Cómo usar:** Usa deslizadores o entradas numéricas para ajustar los valores de espaciado superior, inferior, izquierdo y correcto. ### **Etiqueta e icono** * **Color:** Elige el color predeterminado para cuando el botón esté activo (clicado o con el cursor encima) y un color al pasar el cursor. * **Familia tipográfica:** Selecciona la fuente para el texto de la etiqueta (por ejemplo, Arial, Times New Roman, Verdana). * **Tamaño de fuente:** Ajusta el tamaño del texto de la etiqueta usando un deslizante o una entrada numérica. * **Estilo de fuente:** Elige texto normal, cursiva u oblicuo. * **Grosor de fuente:** Haz el texto ligero, normal, medio, negrita o extra negrita. * **Alineación horizontal:** Decide si el icono debe estar a la izquierda o a la derecha del texto de la etiqueta. ### **Fondo** * **Color:** Elige el color predeterminado para el fondo del botón cuando está activo y el color al pasar el cursor cuando está inactivo. ### **Borde** Elige el color predeterminado para cuando el botón está activo y el color al pasar el cursor para el borde alrededor del botón. * **Tamaño:** Ajusta el grosor del borde usando un deslizante o una entrada numérica. * **Estilo:** Elige entre un borde sólido, discontinuo, punteado o doble. * **Radio:** Puedes ajustar la redondez de las esquinas usando un deslizante o una entrada numérica (un valor más alto hace que las esquinas sean más redondeadas). ### **Imagen (para elementos del menú)** * **Color del borde:** Elige el color del borde alrededor de las imágenes de los elementos del menú (si las tienen). * **Tamaño:** Ajusta el tamaño de las imágenes de los elementos del menú usando un deslizante o una entrada numérica. * **Estilizado:** Elige estilizado normal, cursiva u oblicuo para los subtítulos de las imágenes (si los hay). * **Radio:** Ajusta la redondez de las esquinas de las imágenes de los elementos del menú usando un deslizante o una entrada numérica. * **Ajuste del objeto:** Decide cómo debe ajustarse la imagen dentro de su contenedor (por ejemplo, rellenar, contener, cubrir). ## **Consideraciones importantes** * **Estilizado:** Personaliza la apariencia del menú de botón para que coincida con la marca de tu sitio. * **Vincular a:** Considera agregar la interacción "Vincular a" para gestionar las interacciones de los usuarios con los elementos del menú.