Language Navigation

Github URL

Adobe URL

Source URL

Simple language navigation with Language Structure Depth set to two. Shows a language navigation structure built from a page tree with both country and locale displayed in the result.

jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
navigationRoot: /content/core-components-examples/library/templating/language-navigation/language-structure
jcr:lastModified:
sling:resourceType: core/wcm/components/languagenavigation/v1/languagenavigation
structureDepth: 2

<div class="languagenavigation">
  <nav data-cmp-data-layer="{&quot;languagenavigation-e411fdc67f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/languagenavigation/v1/languagenavigation&quot;,&quot;repo:modifyDate&quot;:&quot;2019-06-06T07:40:17Z&quot;}}" id="languagenavigation-e411fdc67f" class="cmp-languagenavigation">
    <ul class="cmp-languagenavigation__group">
      <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-DE cmp-languagenavigation__item--langcode-de-DE cmp-languagenavigation__item--level-0">
        <span class="cmp-languagenavigation__item-title" lang="de-DE">Deutschland</span>
        <ul class="cmp-languagenavigation__group">
          <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-DE cmp-languagenavigation__item--langcode-de-DE cmp-languagenavigation__item--level-1" data-cmp-data-layer="{&quot;languagenavigation-e411fdc67f-item-72cae85f1b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/languagenavigation/v1/languagenavigation/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:29Z&quot;,&quot;dc:title&quot;:&quot;Deutsch&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/templating/language-navigation/language-structure/de/de/language-navigation.html&quot;,&quot;xdm:language&quot;:&quot;de-DE&quot;}}">
            <a data-cmp-clickable="" class="cmp-languagenavigation__item-link" href="/content/core-components-examples/library/templating/language-navigation/language-structure/de/de/language-navigation.html" hreflang="de-DE" rel="alternate" title="Deutsch" lang="de-DE">Deutsch</a>
          </li>
        </ul>
      </li>
      <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-FR cmp-languagenavigation__item--langcode-fr-FR cmp-languagenavigation__item--level-0">
        <span class="cmp-languagenavigation__item-title" lang="fr-FR">France</span>
        <ul class="cmp-languagenavigation__group">
          <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-FR cmp-languagenavigation__item--langcode-fr-FR cmp-languagenavigation__item--level-1" data-cmp-data-layer="{&quot;languagenavigation-e411fdc67f-item-1f1a991637&quot;:{&quot;@type&quot;:&quot;core/wcm/components/languagenavigation/v1/languagenavigation/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:30Z&quot;,&quot;dc:title&quot;:&quot;Français&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/templating/language-navigation/language-structure/fr/fr/language-navigation.html&quot;,&quot;xdm:language&quot;:&quot;fr-FR&quot;}}">
            <a data-cmp-clickable="" class="cmp-languagenavigation__item-link" href="/content/core-components-examples/library/templating/language-navigation/language-structure/fr/fr/language-navigation.html" hreflang="fr-FR" rel="alternate" title="Français" lang="fr-FR">Français</a>
          </li>
        </ul>
      </li>
      <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-US cmp-languagenavigation__item--langcode-en-US cmp-languagenavigation__item--level-0 cmp-languagenavigation__item--active">
        <span class="cmp-languagenavigation__item-title" lang="en-US">United States</span>
        <ul class="cmp-languagenavigation__group">
          <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-US cmp-languagenavigation__item--langcode-en-US cmp-languagenavigation__item--level-1 cmp-languagenavigation__item--active" data-cmp-data-layer="{&quot;languagenavigation-e411fdc67f-item-bf8f56f487&quot;:{&quot;@type&quot;:&quot;core/wcm/components/languagenavigation/v1/languagenavigation/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:29Z&quot;,&quot;dc:title&quot;:&quot;English&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/templating/language-navigation/language-structure/us/en/language-navigation.html&quot;,&quot;xdm:language&quot;:&quot;en-US&quot;}}">
            <a data-cmp-clickable="" class="cmp-languagenavigation__item-link" href="/content/core-components-examples/library/templating/language-navigation/language-structure/us/en/language-navigation.html" hreflang="en-US" rel="alternate" title="English" lang="en-US">English</a>
          </li>
          <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-ES cmp-languagenavigation__item--langcode-es-ES cmp-languagenavigation__item--level-1" data-cmp-data-layer="{&quot;languagenavigation-e411fdc67f-item-880c07dfb0&quot;:{&quot;@type&quot;:&quot;core/wcm/components/languagenavigation/v1/languagenavigation/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:29Z&quot;,&quot;dc:title&quot;:&quot;Español&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/templating/language-navigation/language-structure/us/es/language-navigation.html&quot;,&quot;xdm:language&quot;:&quot;es-ES&quot;}}">
            <a data-cmp-clickable="" class="cmp-languagenavigation__item-link" href="/content/core-components-examples/library/templating/language-navigation/language-structure/us/es/language-navigation.html" hreflang="es-ES" rel="alternate" title="Español" lang="es-ES">Español</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

{"id":"languagenavigation-e411fdc67f","items":[{"id":"languagenavigation-e411fdc67f-item-cda3b7f14f","path":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/de\/de\/language-navigation","children":[{"id":"languagenavigation-e411fdc67f-item-72cae85f1b","path":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/de\/de\/language-navigation","children":[],"level":1,"active":false,"title":"Deutsch","locale":"de_DE","country":"DE","language":"de-DE","lastModified":1559808060300,"url":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/de\/de\/language-navigation.html","dataLayer":{"languagenavigation-e411fdc67f-item-72cae85f1b":{"@type":"core\/wcm\/components\/languagenavigation\/v1\/languagenavigation\/item","repo:modifyDate":"2020-01-16T15:15:29Z","dc:title":"Deutsch","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/de\/de\/language-navigation.html","xdm:language":"de-DE"}},":type":"core-components-examples\/components\/page"}],"level":0,"active":false,"title":"Deutschland","locale":"de_DE","country":"DE","language":"de-DE","lastModified":1559808060300,"url":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/de\/de\/language-navigation.html","dataLayer":{"languagenavigation-e411fdc67f-item-cda3b7f14f":{"@type":"core\/wcm\/components\/languagenavigation\/v1\/languagenavigation\/item","repo:modifyDate":"2020-01-16T15:15:29Z","dc:title":"Deutschland","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/de\/de\/language-navigation.html","xdm:language":"de-DE"}},":type":"core-components-examples\/components\/page"},{"id":"languagenavigation-e411fdc67f-item-5a94b23a9b","path":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/fr\/fr\/language-navigation","children":[{"id":"languagenavigation-e411fdc67f-item-1f1a991637","path":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/fr\/fr\/language-navigation","children":[],"level":1,"active":false,"title":"Fran\u00e7ais","locale":"fr_FR","country":"FR","language":"fr-FR","lastModified":1559808154698,"url":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/fr\/fr\/language-navigation.html","dataLayer":{"languagenavigation-e411fdc67f-item-1f1a991637":{"@type":"core\/wcm\/components\/languagenavigation\/v1\/languagenavigation\/item","repo:modifyDate":"2020-01-16T15:15:30Z","dc:title":"Fran\u00e7ais","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/fr\/fr\/language-navigation.html","xdm:language":"fr-FR"}},":type":"core-components-examples\/components\/page"}],"level":0,"active":false,"title":"France","locale":"fr_FR","country":"FR","language":"fr-FR","lastModified":1559808154698,"url":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/fr\/fr\/language-navigation.html","dataLayer":{"languagenavigation-e411fdc67f-item-5a94b23a9b":{"@type":"core\/wcm\/components\/languagenavigation\/v1\/languagenavigation\/item","repo:modifyDate":"2020-01-16T15:15:30Z","dc:title":"France","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/fr\/fr\/language-navigation.html","xdm:language":"fr-FR"}},":type":"core-components-examples\/components\/page"},{"id":"languagenavigation-e411fdc67f-item-bf8f56f487","path":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/us\/en\/language-navigation","children":[{"id":"languagenavigation-e411fdc67f-item-bf8f56f487","path":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/us\/en\/language-navigation","children":[],"level":1,"active":true,"title":"English","locale":"en_US","country":"US","language":"en-US","description":"Display a language switcher","lastModified":1559807944878,"url":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/us\/en\/language-navigation.html","dataLayer":{"languagenavigation-e411fdc67f-item-bf8f56f487":{"@type":"core\/wcm\/components\/languagenavigation\/v1\/languagenavigation\/item","repo:modifyDate":"2020-01-16T15:15:29Z","dc:title":"English","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/us\/en\/language-navigation.html","xdm:language":"en-US"}},":type":"core-components-examples\/components\/page"},{"id":"languagenavigation-e411fdc67f-item-880c07dfb0","path":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/us\/es\/language-navigation","children":[],"level":1,"active":false,"title":"Espa\u00f1ol","locale":"es_ES","country":"ES","language":"es-ES","lastModified":1559808252616,"url":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/us\/es\/language-navigation.html","dataLayer":{"languagenavigation-e411fdc67f-item-880c07dfb0":{"@type":"core\/wcm\/components\/languagenavigation\/v1\/languagenavigation\/item","repo:modifyDate":"2020-01-16T15:15:29Z","dc:title":"Espa\u00f1ol","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/us\/es\/language-navigation.html","xdm:language":"es-ES"}},":type":"core-components-examples\/components\/page"}],"level":0,"active":true,"title":"United States","locale":"en_US","country":"US","language":"en-US","description":"Display a language switcher","lastModified":1559807944878,"url":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/us\/en\/language-navigation.html","dataLayer":{"languagenavigation-e411fdc67f-item-bf8f56f487":{"@type":"core\/wcm\/components\/languagenavigation\/v1\/languagenavigation\/item","repo:modifyDate":"2020-01-16T15:15:29Z","dc:title":"United States","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/language-navigation\/language-structure\/us\/en\/language-navigation.html","xdm:language":"en-US"}},":type":"core-components-examples\/components\/page"}],":type":"core\/wcm\/components\/languagenavigation\/v1\/languagenavigation","dataLayer":{"languagenavigation-e411fdc67f":{"@type":"core\/wcm\/components\/languagenavigation\/v1\/languagenavigation","repo:modifyDate":"2019-06-06T07:40:17Z"}}}

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

View all of mchavez's posts.