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.
Este componente aprovecha slots para una personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.
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.
Propiedades
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ú.
Fuente de datos manual: Úselo para crear su estructura de navegación, definiendo cada elemento y sus propiedades.
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
Configuración general de navegació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
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ú
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
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
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.
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ú.
Si su fuente de datos está configurada como manual y su menú incluye subelementos, puede usar la 'variante de menú' característica.
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.
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.
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.
Última actualización
¿Te fue útil?