Localized Site Structure Support
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.
- For an example of how the localization feature of the Navigation Component works, see the section below.
- For an example of how the localization features of the Core Components work together, see the Localization Features of the Core Components page.
Example
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
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 empty pages that represent your desired site structure. This is often referred to as a shadow site structure.
- Set the Redirect values in the page properties on these pages to point to the actual content pages.
- Set the Hide in Navigation option in the page properties of the shadow pages.
- Set the Navigation Root value 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.