> 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 - Navegación
## Descripción general
**AX - Navegación** 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.
Úsalo 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 de acciones. Configura los elementos del menú, el estilo, los desplegables y los destinos de los 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 tu portal necesite navegación más allá del encabezado predeterminado del sitio.
{% hint style="danger" %}
Este componente [aprovecha los 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 Avonni Navigation está diseñado pensando en una mayor flexibilidad. A diferencia de la navegación estándar de Salesforce, permite estructuras de menú más complejas. Puedes crear menús de varios niveles: piensa en ellos como capas o pasos. Por ejemplo, puedes tener elementos principales (Nivel 1), subelementos debajo de estos (Nivel 2) e incluso sub-subelementos (Nivel 3). Este enfoque por capas facilita la organización y la presentación de 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 te permite personalizar de cerca la apariencia de tu menú de navegación para que coincida con el estilo de tu marca. Tienes más que solo opciones de color principal y fuente. Avonni permite una personalización más profunda, lo que te permite crear una experiencia de navegación que sea visualmente atractiva y se sienta como una extensión natural de tu marca.
{% endhint %}
## Propiedades
{% tabs %}
{% tab title="🎚️ Configuración general" %}
| Nombre | Descripción |
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Orientación`** | Elige entre 'horizontal' para una barra de navegación superior tradicional o 'vertical' para una navegación estilo barra lateral. |
| **`Mostrar logotipo del sitio`** | Actívalo para mostrar el logotipo del sitio dentro del componente de navegación. |
| **`Fijo en la parte superior`** | Actívalo 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`** | Activa un menú optimizado para móviles para mejorar la navegación en pantallas pequeñas. |
| **`Abrir menú al pasar el cursor`** | Configura 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ñade un sutil efecto de sombreado a la barra de navegación para darle profundidad visual. |
| **`Mostrar la flecha del desplegable`** | Muestra un pequeño gráfico con forma de flecha que apunta al elemento del menú cuando su desplegable está abierto. |
| **`Mostrar indicador de elemento`** | Actívalo para mostrar indicadores visuales que señalan 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:** Úsalo para crear tu estructura de navegación, definiendo cada elemento y sus propiedades.
| Nombre | Descripción |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **`Etiqueta`** | Elige entre 'horizontal' para una barra de navegación superior tradicional o 'vertical' para una navegación estilo barra lateral. |
| **`Descripción`** | Actívalo para mostrar el logotipo del sitio dentro del componente de navegación. |
| **`Etiqueta`** | Actívalo 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`** | Activa un menú optimizado para móviles para mejorar la navegación en pantallas pequeñas. |
| **`Variante del avatar`** | Configura 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ñade un sutil efecto de sombreado a la barra de navegación para darle profundidad visual. |
| **`Tamaño del icono del avatar`** | Muestra un pequeño gráfico con forma de flecha que apunta al elemento del menú cuando su desplegable está abierto. |
| **`Fuente de la imagen del avatar`** | Actívalo para mostrar indicadores visuales que señalan 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. |
| **`Vínculo de subelementos y sub-subelementos`** |
La URL o página del sitio a la que enlaza el subelemento.
Esto se puede anidar aún más en "sub-subelementos" con los mismos ajustes para otro nivel de profundidad
|
| {% endtab %} | |
{% tab title="🎨 Estilo" %}
### Ajustes generales de navegación
| Nombre | Descripción |
| ----------------------------------------- | -------------------------------------------------------------------------------- |
| **`Tamaño`** | Personaliza las dimensiones generales del menú de navegación. |
| **`Color de fondo`** | Establece el color de fondo para que coincida con el tema de tu sitio. |
| **`Ancho máximo del logotipo del sitio`** | Define el ancho máximo del logotipo del sitio para mantener una marca coherente. |
| **`Tamaño/color del borde inferior`** | Personaliza el tamaño y el color del borde inferior para un aspecto distintivo. |
### Ajustes de elementos de navegación
| Nombre | Descripción |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Ancho del elemento, ancho mín./máx.`** | Especifica las dimensiones de ancho de cada elemento de navegación. |
| **`Color de fondo del elemento`** | Establece 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, grosor y sombra, con ajustes separados para los estados activo y al pasar el cursor. |
| **`Descripción del elemento`** | Personaliza el color del texto, el tamaño de la fuente, la familia, el grosor y la sombra para las descripciones de los elementos. |
| **`Borde del elemento`** | Ajusta el tamaño y el color del borde con configuraciones adicionales para el estado activo. |
### Estilo de subelementos y menús
| Nombre | Descripción |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Color de fondo del subelemento (seleccionado)`** | Elige un color de fondo para los subelementos seleccionados. |
| **`Espaciado del subelemento (bloque/en línea)`** | Ajusta el espaciado alrededor de los subelementos. |
| **`Etiqueta del subelemento`** | Opciones para personalizar el color del texto, el tamaño de la fuente, la familia, el grosor y la sombra, incluidas las configuraciones del estado al pasar el cursor. |
| **`Dimensiones del menú`** | Establece el tamaño del menú, con ajustes de ancho/alto mínimo y máximo. |
| **`Ancho de columna del menú`** | Define el ancho de las columnas del menú. |
| **`Espaciado del menú (bloque/en línea)`** | Ajusta el espaciado dentro del menú. |
| **`Borde del menú`** | Personaliza el color, el tamaño, el estilo y el radio del borde del menú. |
| **`Icono del menú`** | Establece colores para los estados normal, activo y al pasar el cursor. |
| **`Etiqueta del grupo/columna del menú`** | Amplias opciones de personalización del texto para las etiquetas de grupos y columnas. |
### Estilo del menú desplegable lateral
| Nombre | Descripción |
| --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **`Color de fondo del desplegable lateral`** | Ajustes diferentes para el elemento abierto y los colores de fondo secundarios. |
| **`Título principal/secundario del desplegable lateral`** | Personaliza el color del texto, el tamaño de la fuente, la familia, el grosor y la sombra para los títulos principal y secundario. |
| **`Descripción secundaria del desplegable lateral`** | Opciones para el color del texto, el tamaño de la fuente, la familia, el grosor y la sombra. |
### Estilo del desplegable lateral móvil
| Nombre | Descripción |
| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Título principal/secundario del desplegable lateral móvil`** | Opciones de personalización similares a las del desplegable de escritorio, adaptadas para la visualización móvil. |
| **`Descripción secundaria del desplegable lateral móvil`** | Ajusta el color del texto, el tamaño de la fuente, la familia, el grosor y la sombra para las descripciones en el desplegable lateral móvil. |
| {% endtab %} | |
| {% endtabs %} | |
## Apariencia del menú
La **`variante del menú`** en el componente Avonni Navigation para Salesforce Experience Cloud determina el estilo y el comportamiento generales del menú.
{% hint style="info" %}
Si tu fuente de datos está configurada como manual y tu menú incluye subelementos, puedes usar la '**`variante del menú`**' función.
{% endhint %}
Aquí están los significados típicos de las variantes del menú:
### Base
La **`base`** representa el estilo estándar de un menú de navegación. Es sencillo, con los elementos del menú generalmente 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 en pantalla es limitado. Mantiene la navegación oculta y accesible mediante un icono de menú (a menudo un icono de "hamburguesa") hasta que se necesita.
Ejemplo de variante de cajón
### Columnas
Con la **`variante de columnas`** se muestran los menús desplegables en columnas, lo que permite una disposición estructurada 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`** convierte los elementos del menú de nivel superior en navegación con pestañas. Este estilo se usa a menudo cuando diferentes secciones de un sitio deben delimitarse y ser accesibles directamente desde la barra de navegación. Proporciona una interfaz familiar para los usuarios, similar a las pestañas de una carpeta o de un navegador web.
Cada una de estas variantes puede ayudar a definir la experiencia de navegación de tu sitio, por lo que es importante elegir una que se alinee con los principios de diseño de tu sitio y mejore el recorrido 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:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-navigation.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.