Covers dynamic navigation driven by the content hierarchy and including the Quick Search component in the Header. Composite Components and policy sharing between multiple templates are included. Basics of HTL templating language, and dialogs are also used.

Content Hierarchy

It is important with any AEM implementation to plan out the content hierarchy as this is the primary mechanism for organizing the content. Site navigation is often heavily influenced by the content hierarchy and well-thought hierarchy can simplify the application. Permissions and support for multiple languages also play a role in content hierarchy planning.

The fictitious WKND site is a life-style site with articles of things to do in several categories. We will create a content hierarchy that reflects this organization. The navigation will be dynamically populated based on the content hierarchy. We will also set up the site with a language root so that we can use AEM's translation feature in the future.

Top level hierarchy for WKND site structure.

Update Site Hierarchy

A well populated site hierarchy is needed to see the navigation functioning properly. The Landing Page Template will be used to provide much of that structure.

Update the Site Hierarchy

The Navigation component relies on the site hierarchy to function. In order to see it working we will stub out the content hierarchy in advance. Use the Landing Template to create the following series of pages:

Add a new page beneath one of the categories that uses the Article Template. You should end up with something like the following:

Footer Navigation

Core Components includes a Navigation component that we will leverage to create a header and footer navigation. The Navigation component creates a navigation based on the site structure. It has already been proxied into our project, we will add some styling to match the design.

You should be able to re-use the WKND Footer and WKND Navigation - Footer policies on the respective components.

View one of the content pages. You should now be able to see the footer navigation populated on all the content pages.

Header Component

The Header Component will include Navigation as well as Search and a Home/Logo link. We could create a Layout Container and follow the same approach as with the Footer. However attempting to resize all the components and getting them to align would be quite complicated for an author.

Instead we will create a "composite" component. The Header component will embed a Navigation and Quick Search component inside of it. When the Header component is dragged onto the page it will bring the other two with it.

Header Component with embedded Navigation and Quick Search components

Move the Search component into structure

The Search component was created by the AEM project archetype beneath /apps/wknd/components/content. This will be a structural component for this project and embedded into the Header component.

Move the Search component from /apps/wknd/components/content to /apps/wknd/components/structure

Update the componentGroup to be WKND.Structure

Update Header Dialog

Dialogs (the Wrench icon) are used by authors to change content. Until now we have just been styling core components and relied on dialogs already defined. This dialog will allow a user to configure the Root Path to link the WKND Logo.

Beneath /apps/wknd/components/structure/header edit the cq:dialog

It is easiest to edit the xml directly so open aem-guides-wkind.ui.apps/src/main/content/jcr_root/apps/wknd/components/structure/header/_cq_dialog/.content.xml

Design Dialogs allow a user to update the Policy of a component. When working with structural components that will be re-used across templates it is advantageous to use Policies since the policy can be applied across templates.

Create a Header Design Dialog to allow a user to configure the Root Path to link the WKND Logo via a Policy:

Beneath /apps/wknd/components/structure/header create a new node named cq:design_dialog of type nt:unstructured

It is easiest to edit the xml directly so open /wknd-sites-guide.ui.apps/src/main/content/jcr_root/apps/wknd/components/structure/header/_cq_design_dialog/.content.xml

In the XML note the <rootpath /> node that has an attribute name="./rootPath". This will be the name of the property in which the Authors selection will be made.

Note the <styletab> node and the path /mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab. This will include the Style Tab and allow the Header component to leverage the style system.

Update the header.html script to include the navigation and search components

Injects the path selected by the author via the Dialog or Design Dialog. It first looks to see if a properties value of rootPath exists (Dialog) and then falls back to look at the currentStyle (Design Dialog) for the value of the rootPath.

Both properties and currentStyle are Global Objects made available to all components HTL scripts.

The snippet data-sly-resource="${'search' @ resourceType='wknd/components/structure/search'}" includes the Search Component and looks for it as a resource beneath the header named search.

The Navigation Component is included in the same way: data-sly-resource="${'navigation' @ resourceType='wknd/components/structure/navigation'}"

Whenever creating composite components it is a best practice to create a cq:template to ensure that the embedded or sub-components have actual nodes/resources created in the JCR. If there is not a true node that maps to the sub-component odd behavior can occur with the Dialogs and Policies when saving.

However before we can configure it we must Delete it and re-add it. This is because the Header component is now a "composite" component and embeds a navigation and search component. In order for it to function properly the search and navigation nodes must be added to template structure. The cq:template configured earlier, will ensure that the proper node structure is created.

The high level steps for configuring the header:

Delete the header node from the Article and Landing page templates via CRXDE-Lite

Re-add the Header component to the Article page template

Configure the embedded Navigation component in the Header component

Configure the embedded Search component in the Header component

Repeat the steps 2-4 for the Landing page template and re-use the Navigation and Search policies

The below video details these high level steps:

Mobile Navigation

At this point we have used the AEM Style System to style the existing markup generated by a core component. LESS and CSS are very powerful tools to change a component visually but depending on the requirements there will be limitations. It is also possible to use JavaScript to manipulate the markup of a core component after it has loaded. In this way we can re-purpose the markup of the component to be used in a different way, but do not need to make any back-end code changes.

For the mobile navigation we would ideally like the navigation to pop out from the left hand-side and "push" the body of the page off screen. Given the nested location of the navigation in the header component it is not really achievable to accomplish this behavior with CSS alone. Instead we will use a little bit of Javascript to create a copy of the Header Navigation markup and append it to the body tag. This will allow us to create that mobile navigation visual effect.

Use JavaScript to clone the Navigation items in the Header to a mobile navigation that will be appended to the HTML body. This will occur on page load or when the header component is added to the page.

The above code will get called when the responsivegrid is added to the DOM. The first jQuery selector searches for the navigation in the Header. There is expected to only be one. There is a top-level check to avoid duplicate processing, in the case when the component is added via the AEM editor.

Next an anchor tag is appended to the body. This is what users will click to toggle the mobile navigation. After that the header navigation is copied into a new div with an id of mobileNav and a class of cmp-navigation--mobile. This is the mobile navigation and is appended to the body.

Finally a panel function is attached to toggle the mobile navigation visibility. This panel functionality is defined in a 3rd party utility file.

Add 3rd party util.js

Next, add a 3rd party javascript file modified from https://html5up.net/ to allow for click and swipe support of the mobile navigation.

Beneath /apps/wknd/clientlibs/clientlib-site

Create a new folder named js

Beneath the js folder, create a new file named util.js

Populate it with the following util.js
(we have included it as a link to GitHub since the code snippet is very long)

Update js.txt to include new javascript files

Update /apps/wknd/clientlibs/clientlib-site/js.txt to include the navigation.js and util.js files: