# 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](/experience-cloud/experience-cloud-es/tutoriales/interacciones.md) 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ú. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-menu-de-botones.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.