Language Navigation Component 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.

Usage usage

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.

The edit dialog allows the definition of the global site navigation root as well as how deep into the structure the navigation should go. Using the design dialog, the template author can set the default values for the same options.

Version and Compatibility version-and-compatibility

The current version of the Language Navigation Component is v2, which was introduced with release 2.18.0 of the Core Components in February 2022, 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.

For more information about Core Component versions and releases, see the document Core Components Versions.

Sample Component Output sample-component-output

To experience the Language Navigation Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library.

Technical Details technical-details

The latest technical documentation about the Language Navigation Component can be found on GitHub.

Further details about developing Core Components can be found in the Core Components developer documentation.

Design Dialog design-dialog

The design 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.

Properties Tab properties-tab

Example example

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 Root of the component to /content/wknd since that is where your localized content for that site begins. You would also want to set the Language Structure Depth to be 2 since your structure is of two levels (country then language).

With the Navigation Root value, the Language Component knows that after /content/wknd that 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 Depth value).

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.

Styles Tab styles-tab

The Language Navigation Component supports the AEM Style System.

Edit Dialog edit-dialog

Properties Tab properties-tab-edit

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.

Accessibility Tab accessibility-tab

Styles Tab styles-tab-edit

The Language Navigation Component supports the AEM Style System..

Use the drop-down to select the styles that you want to apply to the component. Selections made in the edit dialog have the same effect as those chosen from the component toolbar.

Styles must be configured for this component in the design dialog in order for the drop down menu to be available.

Adobe Client Data Layer data-layer

The Language Navigation Component supports the Adobe Client Data Layer.