# AX - Navegación
## Resumen
**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 elementos de menú, estilos, menús desplegables y destinos de enlace 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](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/primeros-pasos/aprender-lo-basico#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 con mayor flexibilidad en mente. A diferencia de la navegación estándar de Salesforce, permite estructuras de menú más complejas. Puedes crear menús de varios niveles: considéralos 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 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 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 opciones que solo color primario y fuente. Avonni permite una personalización más profunda, lo que te permite crear una experiencia de navegación visualmente atractiva y que 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`** | Activa esta opción para mostrar el logotipo del sitio dentro del componente de navegación. |
| **`Fijar en la parte superior`** | Habilítalo para mantener la barra de navegación en la parte superior del área visible a medida que los usuarios se desplazan hacia abajo por la página. |
| **`Habilitar menú móvil`** | Activa un menú optimizado para móviles para una mejor 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 dar profundidad visual. |
| **`Mostrar nubbin del desplegable`** | Muestra un pequeño gráfico similar a una flecha que apunta al elemento del menú cuando su desplegable está abierto. |
| **`Mostrar indicador del elemento`** | Activa esta opción 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:** Ú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`** | Activa esta opción para mostrar el logotipo del sitio dentro del componente de navegación. |
| **`Etiqueta`** | Habilítalo para mantener la barra de navegación en la parte superior del área visible a medida que los usuarios se desplazan hacia abajo por la página. |
| **`Información sobre herramientas`** | Activa un menú optimizado para móviles para una mejor navegación en pantallas pequeñas. |
| **`Variante de 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 dar profundidad visual. |
| **`Tamaño del icono del avatar`** | Muestra 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`** | Activa esta opción 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`** | 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 una imagen de marca coherente. |
| **`Tamaño/color del borde inferior`** | Personaliza el tamaño y el color del borde inferior para lograr un aspecto distintivo. |
### Configuración de los elementos de navegación
| Nombre | Descripción |
| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Ancho del elemento, ancho mínimo/máximo`** | 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 de desplazamiento. |
| **`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 de desplazamiento. |
| **`Descripción del elemento`** | Personaliza el color del texto, tamaño de fuente, familia, grosor y 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 del menú
| 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, tamaño de fuente, familia, grosor y sombra, incluidas las configuraciones del estado de desplazamiento. |
| **`Dimensiones del menú`** | Establece el tamaño del menú, con configuraciones 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, tamaño, estilo y radio del borde del menú. |
| **`Icono del menú`** | Establece colores para los estados normal, activo y de desplazamiento. |
| **`Etiqueta del grupo/columna del menú`** | Amplias opciones de personalización de texto para las etiquetas de grupos y columnas. |
### Estilo del menú de 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`** | Personaliza el color del texto, tamaño de fuente, familia, grosor y sombra para los títulos principal y secundario. |
| **`Descripción secundaria del cajón`** | Opciones para color de texto, tamaño de fuente, familia, grosor y sombra. |
### Estilo del cajón móvil
| Nombre | Descripción |
| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **`Título principal/secundario del cajón móvil`** | Opciones de personalización similares al cajón de escritorio, adaptadas para la visualización en móviles. |
| **`Descripción secundaria del cajón móvil`** | Ajusta el color del texto, tamaño de fuente, familia, grosor y sombra para las descripciones en el cajón móvil. |
| {% endtab %} | |
| {% endtabs %} | |
## Apariencia del menú
El **`Variante de menú`** configuración dentro del componente Avonni Navigation para Salesforce Experience Cloud determina el estilo y comportamiento general del menú.
{% hint style="info" %}
Si tu fuente de datos está configurada como manual y tu menú incluye subelementos, puedes usar la función '**`Variante de menú`**'.
{% endhint %}
Aquí están las significaciones típicas de las variantes de menú:
### Base
El **`base`** La variante representa el estilo estándar de un menú de navegación. Es sencilla, con los elementos del menú listados normalmente 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
El **`cajón`** La variante implica un menú que se desliza desde un lateral, similar a un cajón que se abre. 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 necesita.
Ejemplo de variante Cajón
### Columnas
Con la **`variante de columnas`** 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 que los usuarios exploren las opciones.
Ejemplo de variante de columnas
### Pestañas
El **`pestañas`** La variante convierte los elementos del menú de nivel superior en una 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 un archivador 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 la experiencia del usuario.
