Navigeringskomponent navigation-component

Med Navigation Component (Navigeringskomponent) kan användarna enkelt navigera i en globaliserad platsstruktur.

Användning usage

Navigeringskomponenten listar ett träd med sidor så att användare på en webbplats enkelt kan navigera i webbplatsstrukturen.

Navigeringskomponenten kan automatiskt identifiera platsens globaliserade struktur och anpassa automatiskt till en lokaliserad sida. Dessutom kan den ha stöd för valfri struktur för godtycklig plats genom att använda skuggomdirigeringssidor för att representera en annan struktur än huvudinnehållsstrukturen.

I redigeringsdialogrutan kan innehållsförfattaren definiera navigeringsrotsidan tillsammans med navigeringsdjupet. I designdialogrutan kan mallskaparen definiera standardvärden för navigeringsroten och -djupet.

Version och kompatibilitet version-and-compatibility

Den aktuella versionen av Navigation Component är v2, som introducerades i version 2.18.0 av Core Components i februari 2022, och som beskrivs i det här dokumentet.

Följande tabell visar alla versioner av komponenten som stöds, de AEM versionerna som komponenterna är kompatibla med och länkar till dokumentation för tidigare versioner.

Mer information om versioner och versioner av kärnkomponenter finns i dokumentet Core Components Versions.

Lokaliserat stöd för webbplatsstruktur localized-site-structure

Webbplatser finns ofta på flera språk för olika regioner. Vanligtvis innehåller varje lokaliserad sida ett navigeringselement som ingår i sidmallen. Med navigeringskomponenten kan du placera den en gång i en mall för alla sidor på platsen, och den anpassas sedan automatiskt för de enskilda lokaliserade sidorna baserat på den globaliserade webbplatsstrukturen.

Exempel example-localization

Låt oss säga att innehållet ser ut ungefär så här:

/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

För platsen WKND vill du förmodligen placera navigeringskomponenten i en sidmall som en del av sidhuvudet. När du är en del av mallen kan du ange navigeringsrot för komponenten till /content/wknd/language-masters/en eftersom det är där huvudinnehållet för den webbplatsen börjar. Du kanske också vill ange Navigeringsstrukturdjupet till 2 eftersom du antagligen inte vill att hela innehållsträdet ska visas av komponenten, utan i stället de två första nivåerna så att det fungerar som en översikt.

Med värdet Navigeringsrot vet navigeringskomponenten att efter /content/wknd/language-masters/en som navigeringen börjar och kan generera navigeringsalternativ genom att repetera platsens struktur två nivåer nedåt (enligt värdet för Navigeringsstrukturens djup ).

Oavsett vilken lokaliserad sida en användare visar kan navigeringskomponenten hitta motsvarande lokaliserad sida genom att känna till platsen för den aktuella sidan, arbeta bakåt till roten och sedan vidarebefordra till motsvarande sida.

Om en besökare visar /content/ch/de/experience/arctic-surfing-in-lofoten kan komponenten generera navigeringsstrukturen baserat på /content/wknd/language-masters/de. Om besökaren visar /content/us/en/experience/arctic-surfing-in-lofoten kan komponenten också generera navigeringsstrukturen baserat på /content/wknd/language-masters/en.

Stöd för Shadow Site Structure shadow-structure

Ibland är det nödvändigt att skapa en navigeringsmeny för besökaren som skiljer sig från den faktiska platsstrukturen. En kampanj kanske ska lyfta fram visst innehåll på menyn genom att ordna om innehållslistan. Med hjälp av skuggsidor, som helt enkelt omdirigeras till andra innehållssidor, kan navigeringskomponenten generera en godtycklig navigeringsstruktur som behövs.

För att göra detta måste du:

Navigeringskomponenten återger sedan menyn baserat på skuggwebbplatsens struktur. Länkarna som återges av komponenten är de faktiska innehållssidorna som skuggsidorna dirigerar om till och inte till själva skuggsidorna. Dessutom visar komponenten namnen på de faktiska sidorna och markerar den aktiva sidan korrekt, även när navigeringen baseras på skuggsidor. Navigeringskomponenten gör skuggsidorna helt genomskinliga för besökaren.

Omdirigeringar i navigering redirects

När en sida har ett omdirigeringsmål (oavsett om det pekar på en extern URL eller en annan AEM sida), är det en navigeringskomponent som innehåller länkar till den punkten direkt till URL:en för omdirigeringsmålet.

Exempel redirect-example

Exempel på komponentutdata sample-component-output

Om du vill visa navigeringskomponenten och se exempel på dess konfigurationsalternativ samt HTML och JSON-utdata går du till komponentbiblioteket.

Teknisk information technical-details

Den senaste tekniska dokumentationen om navigeringskomponenten finns på GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i dokumentationen för kärnkomponentutvecklare.

Dialogrutan Redigera edit-dialog

I redigeringsdialogrutan kan innehållsförfattaren definiera rotsidan för navigering och navigeringsstrukturens djup.

Fliken Egenskaper properties-tab

Fliken Tillgänglighet accessibility-tab

På fliken Hjälpmedel kan värden anges för ARIA-hjälpmedelsetiketter för komponenten.

Fliken Format styles-tab-edit

Navigeringskomponenten stöder AEM Style System..

Använd listrutan för att välja de format som du vill använda på komponenten. Markeringar som görs i redigeringsdialogrutan har samma effekt som de som väljs i komponentverktygsfältet.

Format måste konfigureras för den här komponenten i designdialogrutan för att den nedrullningsbara menyn ska vara tillgänglig.

Designdialogruta design-dialog

I designdialogrutan kan mallskaparen ange standardvärden för navigeringsrotsidan och navigeringsdjupet som presenteras för innehållsförfattarna.

Fliken Egenskaper properties-tab-design

Fliken Format styles-tab

Navigeringskomponenten stöder AEM Style System.

Adobe-klientdatalager data-layer

Navigeringskomponenten stöder datalagret Adobe Client.