Navigation component written in HTL that renders a website navigation tree.
- Can be used on both templates and pages
- Defines a configurable navigation root, navigation root depth and structure depth to allow flexibility in building the navigation tree
- Automatically filters out pages that should be hidden from navigation
- Automatically handles redirect targets defined on pages
The Navigation component uses the com.adobe.cq.wcm.core.components.models.Navigation
Sling model as its Use-object.
The following configuration properties are used:
./navigationRoot
- the root page from which to build the navigation. It can be a blueprint master, language master or regular page../structureStart
- the start level of the navigation structure relative to the navigation root../skipNavigationRoot- deprecated; iftrue
, excludes the navigation root in the resulting tree, including its descendants only../collectAllPages
- iftrue
, collects all pages that are descendants of the./navigationRoot
. Overrides./structureDepth
../structureDepth
- the depth of the navigation structure, relative to the navigation root../disableShadowing
- for redirecting pages PageA -> PageB. Iftrue
- PageA(original page) is shown. Iffalse
or not configured - PageB(target page).
The following properties are written to JCR for the Navigation component and are expected to be available as Resource
properties:
./navigationRoot
- the root page from which to build the navigation. It can be a blueprint master, language master or regular page../structureStart
- the start level of the navigation structure relative to the navigation root../skipNavigationRoot- deprecated; iftrue
, excludes the navigation root in the resulting tree, including its descendants only../collectAllPages
- iftrue
, collects all pages that are descendants of the./navigationRoot
. Overrides./structureDepth
../structureDepth
- the depth of the navigation structure, relative to the navigation root../accessibilityLabel
- defines an accessibility label for the navigation../disableShadowing
- for redirecting pages PageA -> PageB. Iftrue
- PageA(original page) is shown. Iffalse
or not configured - PageB(target page)../id
- defines the component HTML ID attribute.
The component reuses the core.wcm.components.navigation.v1.editor
editor client library category that includes
JavaScript handling for dialog interaction. It is already included by its edit and design dialogs.
BLOCK cmp-navigation
ELEMENT cmp-navigation__group
ELEMENT cmp-navigation__item
MOD cmp-navigation__item--active
MOD cmp-navigation__item--level-*
ELEMENT cmp-navigation__item-link
- Vendor: Adobe
- Version: v2
- Compatibility: AEM 6.3
- Status: production-ready
- Documentation: https://www.adobe.com/go/aem_cmp_navigation_v2
- Component Library: https://www.adobe.com/go/aem_cmp_library_navigation
- Authors: Stefan Seifert, Vlad Bailescu, Jean-Christophe Kautzmann