The Navigation Component allows users to easily navigate a globalized site structure.
The navigation component lists lists a tree of pages so that users of a site can easily navigate the site structure.
The Navigation Component can automatically detect the globalized site structure of your site and adapt automatically to a localized page. Additionally it can support any arbitrary site structure by using shadow redirect pages to represent another structure other than your main content structure.
The edit dialog allows the content author to define the navigation root page along with the depth of navigation. The design dialog allows the template author to define default values for the navigation root and depth.
The current version of the 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.
|Component Version||AEM 6.4||AEM 6.5||AEM as a Cloud Service|
For more information about Core Component versions and releases, see the document Core Components Versions.
Websites are often provided in multiple languages for different regions. Typically each localized page will contain a navigation element which is included as part of the page template. The Navigation Component allows you to place it once on a template for all pages of your site and it will then adapt automatically for the individual localized pages based on your globalized site structure.
Let’s say that your content looks something like this:
/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
For the site WKND, you would probably want to place the 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/language-masters/en since that is where your master content for that site begins. You would maybe also want to set the Navigation Structure Depth to be
2 since you probably don’t want the entire content tree to be shown by the component, but rather the first two levels so it serves as an overview.
With the Navigation Root value, the Navigation Component knows that after
/content/wknd/language-masters/en that that the navigation begins and it can generate navigation options by recursing the site’s structure two levels down (as defined by the Navigation Structure Depth value).
No matter what localized page a user is viewing, the Navigation component is able find the corresponding localized page by knowing the location of the current page, working backwards to the root, and then forwards to the corresponding page.
So if a visitor is viewing
/content/ch/de/experience/arctic-surfing-in-lofoten, the component knows to generate the navigation structure based on
/content/wknd/language-masters/de. Likewise if the visitor is viewing
/content/us/en/experience/arctic-surfing-in-lofoten, the component knows to generate the navigation structure based on
At times it is necessary to create a navigation menu for the visitor that is different from the actual site structure. Perhaps a promotion should highlight certain content in the menu by rearranging the listing of content. Using shadow pages, which simply redirect to other content pages, the navigation component can generate any arbitrary navigation structure necessary.
To do this you will need to:
The Navigation Component will then render the menu based on the shadow site structure. The links rendered by the component are to the actual content pages that the shadow pages redirect to and not to the shadow pages themselves. What’s more, the component displays the names of the actual pages as well as correctly highlights the active page, even when the navigation is based on shadow pages. The Navigation Component effectively makes the shadow pages entirely transparent to the visitor.
Shadow pages make your navigation options much more flexible, but keep in mind that the maintenance of this structure is then completely manual. If you rearrange your actual site content or add/remove content, you will need to manually update your shadow structure as necessary.
When rendering a shadow site structure, only the shadow pages are recursed by the navigation logic. The logic does not recurse the structure of the redirect destinations.
When a page has a redirection target (regardless whether it is pointing to an external URL or to another AEM page), then a navigation component that contains links to that point directly to the URL of the redirection target.
To experience the Navigation Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library.
The latest technical documentation about the Navigation Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.
As of Core Components release 2.1.0, the Navigation Component supports schema.org microdata.
In the edit dialog, the content author can define the root page for navigation and the depth of the navigation structure.
On the Accessibility tab, values can be set for ARIA accessibility labels for the component.
The 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.
The design dialog allows the template author to set the default values for the navigation root page and navigation depth that are presented to the content authors.
The Navigation Component supports the AEM Style System.
The Navigation Component supports the Adobe Client Data Layer.