> 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-navigation.md).
# AX - Navigation
## Resumen
**AX - Navigation** es un componente de Experience Cloud que muestra una barra de navegación personalizable con enlaces y menús en las páginas de Experience Sites.
Úselo para crear estructuras de navegación personalizadas más allá de la navegación estándar de Experience Cloud, como menús secundarios, navegación contextual o grupos de enlaces específicos para acciones. Configure elementos del menú, estilos, menús desplegables y destinos de enlaces en Experience Builder sin código.
Perfecto para la navegación personalizada de páginas, menús contextuales, enlaces de acciones rápidas o cualquier lugar donde su portal necesite navegación más allá del encabezado predeterminado del sitio.
{% hint style="danger" %}
Este componente [aprovecha slots](/experience-cloud/experience-cloud-es/primeros-pasos/learning-the-basics.md#understanding-slots) para una personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.
{% endhint %}
{% hint style="info" %}
El componente de navegación Avonni está diseñado con una mayor flexibilidad en mente. A diferencia de la navegación estándar de Salesforce, permite estructuras de menú más complejas. Puede crear menús de varios niveles: piense en ellos como capas o pasos. Por ejemplo, puede tener elementos principales (Nivel 1), subelementos debajo de estos (Nivel 2) e incluso sub-subelementos (Nivel 3). Este enfoque por capas facilita organizar y presentar una gran cantidad de información de una manera estructurada y accesible.
Además, Avonni ofrece una gama más amplia de opciones de estilo. Esto le permite personalizar de cerca la apariencia de su menú de navegación para que coincida con el estilo de su marca. Tiene más opciones que solo color primario y fuente. Avonni permite una personalización más profunda, lo que le permite crear una experiencia de navegación que sea visualmente atractiva y se sienta como una extensión natural de su marca.
{% endhint %}
## Propiedades
{% tabs %}
{% tab title="🎚️ Configuración general" %}
| Nombre | Descripción |
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Orientación`** | Elija entre 'horizontal' para una barra de navegación superior tradicional o 'vertical' para una navegación tipo barra lateral. |
| **`Mostrar logotipo del sitio`** | Actívelo para mostrar el logotipo del sitio dentro del componente de navegación. |
| **`Fijo arriba`** | Actívelo para mantener la barra de navegación en la parte superior del área visible mientras los usuarios se desplazan por la página. |
| **`Habilitar menú móvil`** | Active un menú optimizado para móviles para una mejor navegación en pantallas más pequeñas. |
| **`Abrir menú al pasar el cursor`** | Configure los menús desplegables para que se abran cuando el usuario pase el cursor sobre un elemento del menú, en lugar de requerir un clic. |
| **`Sombreado`** | Añada un sutil efecto de sombreado a la barra de navegación para darle profundidad visual. |
| **`Mostrar nubbin del desplegable`** | Muestre un pequeño gráfico similar a una flecha que apunta al elemento del menú cuando su desplegable esté abierto. |
| **`Mostrar indicador del elemento`** | Actívelo para mostrar indicadores visuales que señalen que hay más contenido disponible debajo de un elemento del menú. |
| {% endtab %} | |
{% tab title="🗄️ Configuración de la fuente de datos" %}
**Fuente de datos manual:** Úselo para crear su estructura de navegación, definiendo cada elemento y sus propiedades.
| Nombre | Descripción |
| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Etiqueta`** | Elija entre 'horizontal' para una barra de navegación superior tradicional o 'vertical' para una navegación tipo barra lateral. |
| **`Descripción`** | Actívelo para mostrar el logotipo del sitio dentro del componente de navegación. |
| **`Etiqueta`** | Actívelo para mantener la barra de navegación en la parte superior del área visible mientras los usuarios se desplazan por la página. |
| **`Información sobre herramientas`** | Active un menú optimizado para móviles para una mejor navegación en pantallas más pequeñas. |
| **`Variante de avatar`** | Configure los menús desplegables para que se abran cuando el usuario pase el cursor sobre un elemento del menú, en lugar de requerir un clic. |
| **`Nombre del icono del avatar`** | Añada un sutil efecto de sombreado a la barra de navegación para darle profundidad visual. |
| **`Tamaño del icono del avatar`** | Muestre un pequeño gráfico similar a una flecha que apunta al elemento del menú cuando su desplegable esté abierto. |
| **`Fuente de la imagen del avatar`** | Actívelo para mostrar indicadores visuales que señalen que hay más contenido disponible debajo de un elemento del menú. |
| **`Etiqueta de subelementos y sub-subelementos`** | El texto que se muestra para el subelemento. |
| **`Enlace de subelementos y sub-subelementos a`** |
La URL o página del sitio a la que enlaza el subelemento.
Esto puede anidarse aún más en "sub-subelementos" con la misma configuración para otro nivel de profundidad
|
| {% endtab %} | |
{% tab title="🎨 Estilo" %}
### Configuración general de navegación
| Nombre | Descripción |
| ----------------------------------------- | --------------------------------------------------------------------------------------- |
| **`Tamaño`** | Personalice las dimensiones generales del menú de navegación. |
| **`Color de fondo`** | Establezca el color de fondo para que coincida con el tema de su sitio. |
| **`Ancho máximo del logotipo del sitio`** | Defina el ancho máximo para el logotipo del sitio para mantener una marca coherente. |
| **`Tamaño/color del borde inferior`** | Personalice el tamaño y el color del borde inferior para obtener un aspecto distintivo. |
### Configuración de los elementos de navegación
| Nombre | Descripción |
| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Ancho del elemento, ancho mínimo/máximo`** | Especifique las dimensiones de ancho para cada elemento de navegación. |
| **`Color de fondo del elemento`** | Establezca diferentes colores de fondo para los estados activo y al pasar el cursor. |
| **`Etiqueta del elemento`** | Amplias opciones de personalización para el texto de la etiqueta, incluyendo color, tamaño de fuente, familia, peso y sombra, con configuraciones separadas para los estados activo y al pasar el cursor. |
| **`Descripción del elemento`** | Personalice el color del texto, el tamaño de fuente, la familia, el peso y la sombra para las descripciones de los elementos. |
| **`Borde del elemento`** | Ajuste el tamaño y el color del borde con configuraciones adicionales para el estado activo. |
### Estilo de subelementos y menú
| Nombre | Descripción |
| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Color de fondo del subelemento (seleccionado)`** | Elija un color de fondo para los subelementos seleccionados. |
| **`Espaciado de subelementos (bloque/en línea)`** | Ajuste el espaciado alrededor de los subelementos. |
| **`Etiqueta del subelemento`** | Opciones para personalizar el color del texto, el tamaño de fuente, la familia, el peso y la sombra, incluidas las configuraciones del estado al pasar el cursor. |
| **`Dimensiones del menú`** | Establezca el tamaño del menú, con configuraciones de ancho/alto mínimo y máximo. |
| **`Ancho de columna del menú`** | Defina el ancho de las columnas en el menú. |
| **`Espaciado del menú (bloque/en línea)`** | Ajuste el espaciado dentro del menú. |
| **`Borde del menú`** | Personalice el color, tamaño, estilo y radio del borde del menú. |
| **`Icono del menú`** | Establezca colores para los estados normal, activo y al pasar el cursor. |
| **`Etiqueta del grupo/columna del menú`** | Amplias opciones de personalización de texto para las etiquetas de grupo y de columna. |
### Estilo del menú cajón
| Nombre | Descripción |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| **`Color de fondo del cajón`** | Configuraciones diferentes para el elemento abierto y los colores de fondo secundarios. |
| **`Título principal/secundario del cajón`** | Personalice el color del texto, el tamaño de fuente, la familia, el peso y la sombra para los títulos principales y secundarios. |
| **`Descripción secundaria del cajón`** | Opciones para el color del texto, el tamaño de fuente, la familia, el peso y la sombra. |
### Estilo del cajón móvil
| Nombre | Descripción |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **`Título principal/secundario del cajón móvil`** | Opciones de personalización similares a las del cajón de escritorio, adaptadas para la visualización en móviles. |
| **`Descripción secundaria del cajón móvil`** | Ajuste el color del texto, el tamaño de fuente, la familia, el peso y la sombra para las descripciones en el cajón móvil. |
| {% endtab %} | |
| {% endtabs %} | |
## Apariencia del menú
La **`variante de menú`** dentro del componente de navegación Avonni para Salesforce Experience Cloud determina el estilo y el comportamiento generales del menú.
{% hint style="info" %}
Si su fuente de datos está configurada como manual y su menú incluye subelementos, puede usar la '**`variante de menú`**' característica.
{% endhint %}
Estas son las significaciones típicas de las variantes de menú:
### Base
La **`base`** representa el estilo estándar de un menú de navegación. Es sencillo, con los elementos del menú normalmente listados en una fila para una orientación horizontal o en una columna para una orientación vertical. Esta variante es limpia y minimalista, lo que la convierte en una buena opción para la mayoría de los sitios donde se desea un aspecto clásico.
### Cajón
La **`cajón`** La variante implica un menú que se desliza desde un lado, similar a un cajón abierto. Este estilo se usa a menudo para menús verticales, especialmente en vistas móviles o cuando el espacio de pantalla es limitado. Mantiene la navegación oculta y accesible mediante un icono de menú (a menudo un icono de "hamburguesa") hasta que se necesite.
Ejemplo de variante de cajón
### Columnas
Con la **`columnas`** variante, los menús desplegables se muestran en columnas, lo que permite un diseño estructurado de varios niveles dentro del propio desplegable. Esto es especialmente útil para organizar una navegación compleja con muchos elementos o categorías, facilitando a los usuarios explorar las opciones.
Ejemplo de variante de columnas
### Pestañas
La **`pestañas`** variante convierte los elementos del menú de nivel superior en navegación por pestañas. Este estilo se usa a menudo cuando diferentes secciones de un sitio necesitan ser delimitadas y accesibles directamente desde la barra de navegación. Proporciona una interfaz familiar para los usuarios, similar a las pestañas de un archivador o de un navegador web.
Cada una de estas variantes puede ayudar a definir la experiencia de navegación de su sitio, por lo que es importante elegir una que esté alineada con los principios de diseño de su sitio y mejore la experiencia del usuario.
Ejemplo de variante de pestañas
---
# 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-navigation.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.