Componente de Navegação navigation-component

O componente de Navegação permite que os usuários naveguem facilmente em uma estrutura de site globalizada.

Uso usage

O componente de Navegação lista uma árvore de páginas para que os usuários de um site possam navegar facilmente pela estrutura do site.

O componente de Navegação pode detectar automaticamente a estrutura globalizada do site e adaptar-se automaticamente a uma página localizada. Além disso, ele pode suportar qualquer estrutura de site arbitrária usando páginas de redirecionamento de sombra para representar outra estrutura diferente da estrutura de conteúdo principal.

A caixa de diálogo de edição permite que o autor do conteúdo defina a página raiz de navegação junto com a profundidade da navegação. A caixa de diálogo de design permite que o autor do modelo defina valores padrão para a raiz e a profundidade de navegação.

Versão e compatibilidade version-and-compatibility

A versão atual do componente de navegação é a v2, introduzida com a versão 2.18.0 dos componentes principais em fevereiro de 2022, e está descrita neste documento.

A tabela a seguir detalha todas as versões compatíveis do componente, as versões do AEM com as quais as versões do componente são compatíveis e os links para a documentação das versões anteriores.

Para mais informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.

Suporte localizado à estrutura do site localized-site-structure

Geralmente, os sites são fornecidos em vários idiomas para diferentes regiões. Normalmente, cada página localizada contém um elemento de navegação que é incluído como parte do modelo da página. O componente de Navegação permite colocá-lo uma vez em um modelo para todas as páginas do site e ele se adaptará automaticamente às páginas localizadas individuais com base na estrutura do site globalizado.

Exemplo example-localization

Digamos que seu conteúdo seja mais ou menos assim:

/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 o site da WKND, você provavelmente colocaria o componente de Navegação em um modelo de página como parte do cabeçalho. Depois de fazer parte do modelo, você pode definir a Raiz de navegação do componente para /content/wknd/language-masters/en, pois é onde o conteúdo principal desse site começa. Talvez você também queira definir a Profundidade da estrutura de navegação como 2, pois não vai querer que a árvore de conteúdo inteira seja mostrada pelo componente, mas sim os dois primeiros níveis, de modo que sirva como uma visão geral.

Com o valor Raiz de Navegação, o componente de Navegação sabe que depois de /content/wknd/language-masters/en, a navegação começa e pode gerar opções de navegação ao repetir a estrutura do site em dois níveis abaixo (conforme definido pelo valor Profundidade da estrutura de navegação).

Independentemente da página localizada que um usuário esteja visualizando, o componente de Navegação pode encontrar a página localizada correspondente, conhecendo o local da página atual, trabalhando de trás para frente até a raiz e, em depois, para frente, até a página correspondente.

Portanto, se um visitante estiver visualizando /content/ch/de/experience/arctic-surfing-in-lofoten, o componente saberá gerar a estrutura de navegação com base em /content/wknd/language-masters/de. Da mesma forma que se o visitante estiver visualizando /content/us/en/experience/arctic-surfing-in-lofoten, o componente saberá gerar a estrutura de navegação com base em /content/wknd/language-masters/en.

Suporte à estrutura de shadow sites shadow-structure

Às vezes, é necessário criar um menu de navegação para o visitante que seja diferente da estrutura real do site. Talvez uma promoção deva destacar determinado conteúdo no menu, reorganizando a listagem de conteúdo. Usando páginas sombra, que simplesmente redirecionam para outras páginas de conteúdo, o componente de navegação pode gerar qualquer estrutura de navegação arbitrária necessária.

Para fazer isso, é necessário:

O componente de Navegação renderizará o menu com base na estrutura do shadow site. Os links renderizados pelo componente são para as páginas de conteúdo real para as quais as páginas sombra redirecionam e não para as próprias páginas sombra. Além disso, o componente exibe os nomes das páginas reais, e destaca corretamente a página ativa, mesmo quando a navegação se baseia em páginas sombra. O componente de Navegação torna as páginas sombra totalmente transparentes para o visitante.

Redirecionamentos na navegação redirects

Quando uma página tem um destino de redirecionamento (independentemente de estar apontando para um URL externo ou para outra página do AEM), um componente de navegação que contém links para aquele aponta diretamente para o URL do destino de redirecionamento.

Exemplo redirect-example

Exemplo de saída do componente sample-component-output

Para experimentar o componente de Navegação, e ver exemplos de suas opções de configuração e de saídas HTML e JSON, visite a Biblioteca de Componentes.

Detalhes técnicos technical-details

A documentação técnica mais recente sobre o componente de Navegação pode ser encontrada no GitHub.

Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.

Caixa de diálogo de edição edit-dialog

Na caixa de diálogo de edição, o autor de conteúdo pode definir a página raiz para navegação e a profundidade da estrutura de navegação.

Guia Propriedades properties-tab

Guia Acessibilidade accessibility-tab

Na guia Acessibilidade, os valores podem ser definidos para rótulos de acessibilidade ARIA para o componente.

Guia Estilos styles-tab-edit

O componente de navegação é compatível com o sistema de estilos do AEM.

Use o menu suspenso para selecionar os estilos que deseja aplicar ao componente. As seleções feitas na caixa de diálogo de edição têm o mesmo efeito das selecionadas na barra de ferramentas do componente.

Os estilos devem ser configurados para esse componente na caixa de diálogo de design para que o menu suspenso fique disponível.

Caixa de diálogo de design design-dialog

A caixa de diálogo de design permite que o autor do modelo defina os valores padrão para a página raiz de navegação e a profundidade de navegação apresentadas aos autores de conteúdo.

Guia Propriedades properties-tab-design

Guia Estilos styles-tab

O componente de Navegação é compatível com o Sistema de estilos do AEM.

Camada de dados de clientes Adobe data-layer

O componente de Navegação é compatível com a Camada de dados de clientes Adobe.