Componente Navegación navigation-component

El componente Navegación permite a los usuarios navegar fácilmente por una estructura de sitio globalizada.

Uso usage

El componente de navegación enumera un árbol de páginas para que los usuarios de un sitio puedan navegar fácilmente por su estructura.

El componente de navegación puede detectar automáticamente la estructura globalizada del sitio y adaptarse automáticamente a una página localizada. Además, puede admitir cualquier estructura de sitio arbitraria utilizando páginas de redireccionamiento de sombras para representar una estructura distinta a la del contenido principal.

El cuadro de diálogo de edición permite que el autor del contenido defina la página raíz de navegación junto con la profundidad de navegación. El cuadro de diálogo de diseño permite que el autor de la plantilla defina los valores predeterminados para la raíz y profundidad de navegación.

Versión y compatibilidad version-and-compatibility

La versión actual del componente de navegación es la versión 2, que se introdujo con la versión 2.18.0 de los componentes principales en febrero de 2022 y se describe en este documento.

La siguiente tabla detalla todas las versiones compatibles del componente, las versiones de AEM con las que son compatibles las versiones del componente y los vínculos a la documentación de versiones anteriores.

Para obtener más información sobre las versiones y publicaciones de los componentes principales, consulte el documento Versiones de los componentes principales.

Compatibilidad con la estructura del sitio localizada localized-site-structure

Los sitios web a menudo se ofrecen en varios idiomas para diferentes regiones. Normalmente, cada página localizada contiene un elemento de navegación que se incluye como parte de la plantilla de página. El componente de navegación le permite colocarlo una vez en una plantilla para todas las páginas del sitio y, a continuación, se adaptará automáticamente para cada página localizada en función de la estructura del sitio globalizada.

Ejemplo example-localization

Digamos que el contenido tiene este aspecto:

/content
+-- wknd
   +-- language-masters
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- es
      +-- fr
      \-- it
   +-- us
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      \-- es
   \-- ch
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

Para el WKND del sitio, probablemente quiera colocar el componente de navegación en una plantilla de página como parte del encabezado. Una vez que forme parte de la plantilla, puede establecer la Raíz de navegación del componente en /content/wknd/language-masters/en, ya que ahí es donde comienza el contenido maestro para ese sitio. Tal vez también quiera configurar la Profundidad de la estructura de navegación para que sea 2, ya que probablemente no quiera que el componente muestre todo el árbol de contenido, sino los dos primeros niveles, de modo que sirva como descripción general.

Con el valor Raíz de navegación, el componente de navegación sabe que después de /content/wknd/language-masters/en comienza la navegación y puede generar opciones de navegación recurriendo a la estructura del sitio en dos niveles hacia abajo (según se defina en el valor Profundidad de la estructura de navegación).

Independientemente de la página localizada que esté viendo un usuario, el componente Navegación puede encontrar la página localizada correspondiente conociendo la ubicación de la página actual, trabajando hacia atrás hasta la raíz y luego reenviando a la página correspondiente.

Por lo tanto, si un visitante está viendo /content/ch/de/experience/arctic-surfing-in-lofoten, el componente sabe que genera la estructura de navegación basada en /content/wknd/language-masters/de. Del mismo modo, si el visitante está viendo /content/us/en/experience/arctic-surfing-in-lofoten, el componente sabe generar la estructura de navegación basada en /content/wknd/language-masters/en.

Compatibilidad con la estructura del sitio en la sombra shadow-structure

A veces es necesario crear un menú de navegación para el visitante que sea diferente a la estructura real del sitio. Una promoción debería resaltar cierto contenido del menú reorganizando la lista de contenido. Con las páginas en la sombra, que simplemente se redirigen a otras páginas de contenido, el componente de navegación puede generar cualquier estructura de navegación arbitraria necesaria.

Para ello, deberá:

A continuación, el componente de navegación procesará el menú basado en la estructura del sitio en la sombra. Los vínculos que representa el componente son a las páginas de contenido real a las que las páginas en la sombra se redirigen y no a las propias páginas en la sombra. Además, el componente muestra los nombres de las páginas reales y resalta correctamente la página activa, incluso cuando la navegación se basa en páginas en la sombra. El componente de navegación hace que las páginas en la sombra sean totalmente transparentes para el visitante.

Redirecciones en navegación redirects

Cuando una página tiene un objetivo de redirección (independientemente de si apunta a una dirección URL externa o a otra página de AEM), cualquier componente de navegación que contenga vínculos hacia ahí apunta directamente a la dirección URL del destino de redirección.

Ejemplo redirect-example

Salida del componente de ejemplo sample-component-output

Para experimentar el componente de navegación, ver ejemplos de sus opciones de configuración y la salida HTML y JSON, visite la Biblioteca de componentes.

Detalles técnicos technical-details

La documentación técnica más reciente sobre el componente de navegación se encuentra en GitHub.

Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.

Cuadro de diálogo de edición edit-dialog

En el cuadro de diálogo de edición, el autor del contenido puede definir la página raíz para la navegación y la profundidad de la estructura de navegación.

Pestaña Propiedades properties-tab

Pestaña Accesibilidad accessibility-tab

En la pestaña Accesibilidad, se pueden configurar valores para las etiquetas de accesibilidad ARIA del componente.

Pestaña Estilos styles-tab-edit

El componente de navegación es compatible con el sistema de estilos de AEM.

Utilice la lista desplegable para seleccionar los estilos que desea aplicar al componente. Las selecciones realizadas en el cuadro de diálogo de edición tienen el mismo efecto que las seleccionadas en la barra de herramientas de componentes.

Los estilos deben configurarse para este componente en el cuadro de diálogo de diseño para que el menú desplegable esté disponible.

Cuadro de diálogo de diseño design-dialog

El cuadro de diálogo de diseño permite al autor de la plantilla establecer los valores predeterminados para la página raíz de navegación y la profundidad de navegación que se presentan a los autores de contenido.

Pestaña Propiedades properties-tab-design

Pestaña Estilos styles-tab

El componente de navegación es compatible con el sistema de estilos de AEM.

Capa de datos del cliente de Adobe data-layer

El componente de navegación es compatible con la capa de datos del cliente de Adobe.