> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-button-menu.md). # AX - Menú de botones ## Descripción general **AX - Menú de botones** 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 de registro. Configura los elementos del menú manualmente o extráelos dinámicamente de los datos de Salesforce en Experience Builder. Perfecto para navegación compacta, menús desbordados, acciones de perfil de usuario, operaciones masivas o cualquier lugar donde necesites varias opciones sin saturar la página con botones separados. ## Configuración del menú de botones El componente Menú de botones te permite crear un menú desplegable activado por un clic en un botón. Así es como 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 usarlo:** Elige entre los iconos disponibles en el Lightning Design System. * **Opcional:** Puedes dejar esto en blanco si no quieres un icono.
### **Estilo del botón** * **Qué hace:** Cambia la apariencia del botón para que coincida con el aspecto 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 * Abajo a la izquierda * Más...
### **Activador del menú** * **Qué hace:** Controla cómo se abre el menú. * **Opciones:** * Clic * Al pasar el cursor (abrir al pasar el ratón por encima) * Enfoque (abrir al recibir el foco del teclado)

Activador del menú configurado en Pasar el cursor

### **Información sobre herramientas** * **Qué hace:** Muestra información útil cuando los usuarios pasan el cursor sobre el botón. * **Opcional:** Déjalo 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.
### **Extender al ancho completo** * **Qué hace:** Hace que el botón se expanda para ocupar todo el ancho disponible. * **Opcional:** Marca esta casilla si quieres un botón más grande. ### **Deshabilitar botón** * **Qué hace:** Hace temporalmente que el botón y el menú no se puedan usar. * **Opcional:** Marca esta casilla para impedir que los usuarios interactúen con él.,
### **Nubbin del menú** * El nubbin del menú es un pequeño triángulo sutil junto a los elementos del menú dentro de un menú de botones. * Conecta visualmente el elemento del menú con el botón que abre el menú, guiando la mirada del usuario. * Esto ayuda a los usuarios a identificar rápidamente qué elemento del menú está asociado a un botón concreto, mejorando la experiencia general del usuario.
### **Elementos del menú** * **Qué hace:** Define los enlaces o acciones en el menú desplegable. * **Cómo usarlo:** Añade elementos con etiquetas (el texto mostrado) y un icono si es necesario.
#### Configurar la navegación del elemento Para hacer interactivo tu menú de botones, tendrás que indicar a cada elemento del menú a dónde ir cuando alguien haga clic en él. Esto se hace en la sección "Enlace a". Puedes obtener más información sobre los [distintos tipos de acciones](/experience-cloud/experience-cloud-es/tutoriales/interactions.md) que puedes activar desde el menú de botones aquí.
*** ## **Configuración de apariencia** Estos ajustes te permiten personalizar visualmente tu menú de botones para que coincida con el diseño y la imagen de marca de tu sitio. ### **Espaciado** * **Qué hace:** Controla el espacio alrededor del botón. * **Cómo usarlo:** Usa controles deslizantes o campos numéricos para ajustar los valores de espaciado superior, inferior, izquierdo y derecho. ### **Etiqueta e icono** * **Color:** Elige el color predeterminado cuando el botón esté activo (se haga clic o se pase el cursor sobre él) 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 control deslizante o un campo numérico. * **Estilo de fuente:** Elige texto normal, cursiva o inclinado. * **Peso de fuente:** Haz que el texto sea 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 del fondo del botón cuando esté activo y el color al pasar el cursor cuando esté inactivo. ### **Borde** Elige el color predeterminado cuando el botón esté activo y el color al pasar el cursor para el borde que rodea el botón. * **Tamaño:** Ajusta el grosor del borde usando un control deslizante o un campo numérico. * **Estilo:** Elige entre un borde sólido, discontinuo, punteado o doble. * **Radio:** Puedes ajustar la redondez de las esquinas usando un control deslizante o un campo numérico (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 tienen uno). * **Tamaño:** Ajusta el tamaño de las imágenes de los elementos del menú usando un control deslizante o un campo numérico. * **Estilo:** Elige un estilo normal, cursiva o inclinado para los pies de foto 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 control deslizante o un campo numérico. * **Ajuste del objeto:** Decide cómo debe encajar la imagen dentro de su contenedor (por ejemplo, rellenar, contener, cubrir). ## **Consideraciones importantes** * **Estilo:** Personaliza el aspecto y la sensación del menú de botones para que coincida con la imagen de marca de tu sitio. * **Enlace a:** Considera añadir la interacción "Enlace a" para gestionar las interacciones de los usuarios con los elementos del menú. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-button-menu.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.