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.
Localized Site Structure Support
Websites are often provided in multiple languages for different regions. Typically each localized page will contain a navagation 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 +-- we-retail +-- 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 We.Retail, 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 Rootof the component to
/content/we-retail/language-masters/ensince that is where your master content for that site begins. You would maybe also want to set the
Navigation Structure Depthto be
2since 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.
Navigation Rootvalue, the Navigation Component knows that after
/content/we-retail/language-masters/enthat 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 Depthvalue).
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/we-retail/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
Shadow Site Structure Support
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:
- Create shadow pages as emtpy pages that represent your desired site structure. This is often referred to as a shadow site structure.
- Set theRedirectvalues in the page prorperties on these pages to point to the actual content pages.
- Set theHide in Navigationoption in the page properties of the shadow pages.
- Set theNavigation Rootvalue of the Navigation Component to point to the root of the new shadow site structure.
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 maintence 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.
Version and Compatibility
The current version of the 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.
For more information about Core Component versions and releases, see the document Core Components Versions .
Sample Component Output
In the edit dialog, the content author can define the root page for navigation and the depth of the navigation structure.
- Navigation RootThe root page, which will be used to generate the navigation tree.
- Exclude navigation rootExclude the navigation root in the resulting tree, include its descendants only.
- Collect all child pagesCollect all pages that are descendants of the navigation root.
- Navigation Structure DepthDefines how many levels down the navigation tree the component should display relative to the navigation root (only available whenCollect all child pagesis not selected).
Accessibilitytab, values can be set for ARIA accessibility labels for the component.
- Label- Value of an ARIA label attribute for the component
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.
- Navigation RootThe default value of the root page of the navigation structure, which will be used to generate the navigation tree and defaulted when the content author adds the component to the page.
- Exclude navigation rootThe default value of the option to exclude the navigation root in the resulting tree.
- Collect all child pagesThe default value of the option to collect all pages that are descendants of the navigation root.
- Navigation Structure DepthThe default value of the navigation structure depth.