Navigation Component navigation-component

The Navigation Component allows users to easily navigate a globalized site structure.

Usage usage

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.

Version and Compatibility version-and-compatibility

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.

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

Localized Site Structure Support localized-site-structure

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.

Example example-localization

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 /content/wknd/language-masters/en.

Shadow Site Structure Support shadow-structure

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.

Redirects in Navigation redirects

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.

Example redirect-example

Sample Component Output sample-component-output

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.

Technical Details technical-details

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.

Edit Dialog edit-dialog

In the edit dialog, the content author can define the root page for navigation and the depth of the navigation structure.

Properties Tab properties-tab

Accessibility Tab accessibility-tab

On the Accessibility tab, values can be set for ARIA accessibility labels for the component.

Styles Tab styles-tab-edit

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.

Design Dialog design-dialog

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.

Properties Tab properties-tab-design

Styles Tab styles-tab

The Navigation Component supports the AEM Style System.

Adobe Client Data Layer data-layer

The Navigation Component supports the Adobe Client Data Layer.