Language Navigation Component
The Language Navigation Component provides a language/country navigation for a site, so that visitors can navigate to the same page in a different locale.
Websites are often provided in multiple languages for different regions. The language navigation component allows a visitor to view the same page in different languages/locales. So if you are a reader on the Swiss German version of the website, you can easily switch to the US English version of the same page. The Language Navigation component handles understanding the site language structure and finds the corresponding page automatically.
Version and Compatibility
The current version of the Language Navigation Component is v1, which was introduced with release 2.0.0 of the Core Components in January 2018, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
AEM as a Cloud Service
For more information about Core Component versions and releases, see the document Core Components Versions .
Sample Component Output
The edit dialog allows the definition of the global site navigation root as well as how deep into the structure the navigation should go.
Typically these configurations only need to be done at the page template level. However, they can be changed on the page level via the edit dialog .
- Navigation Root
- This is where the language navigation of the site should start.
- The language structure of the site begins on the next level below this root.
- Language Structure Depth
- This is how many levels of the content tree below theNavigation Rootrepresent the language structure of the site. Examples:
- 1typically means that you only have the choice of language.
- 2typically means that you have a choice of language and country.
- 3typically means that you have a choice of language, country, and region.
Let's say that your content looks something like this:
/content +-- wknd +-- language-masters +-- us +-- en \-- es \-- ch +-- de +-- fr \-- it +-- wknd-events \-- wknd-shop
For the site WKND, you would probably want to place the Language Navigation component on a page template as part of the header. Once part of the template, you can set the
Navigation Rootof the component to
/content/wkndsince that is where your localized content for that site begins. You would also want to set the
Language Structure Depthto be
2since your structure is of two levels (country then language).
Navigation Rootvalue, the Language Component knows that after
/content/wkndthat that the navigation begins and it can generate language navigation options by recognizing the next two levels in the content tree as the site's language navigation structure (as defined by the
Language Structure Depthvalue).
No matter what page a user is viewing, the Language Navigation component is able find the corresponding page in another language, by knowing the location of the current page and working backwards to the root, and then forwards to the corresponding page.
Typically the Language Navigation component only needs to be added to and configured on the page templates of a site. However if the Language Navigation component needs to be added to an individual content page, the edit dialog allows a content author to configure the same values as described in the design dialog .
Additionally you can set an
ID. This option allows to control the unique identifier of the component in the HTML and in the Data Layer .
- If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
- If an ID is specified, it is the responsibility of the author to make sure that it is unique.
- Changing the ID can have an impact on CSS, JS and Data Layer tracking.