navigation

Navigation (v1)

Navigation component written in HTL that renders a website navigation tree.

Features

• 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

Use Object

The Navigation component uses the com.adobe.cq.wcm.core.components.models.Navigation Sling model as its Use-object.

Component Policy Configuration Properties

The following configuration properties are used:

1. ./navigationRoot - the root page from which to build the navigation. It can be a blueprint master, language master or regular page.
2. ./structureStart - the start level of the navigation structure relative to the navigation root.
3. ./skipNavigationRoot - deprecated; if true, excludes the navigation root in the resulting tree, including its descendants only.
4. ./collectAllPages - if true, collects all pages that are descendants of the ./navigationRoot. Overrides ./structureDepth.
5. ./structureDepth - the depth of the navigation structure, relative to the navigation root.
6. ./disableShadowing - for redirecting pages PageA -> PageB. If true - PageA(original page) is shown. If false or not configured - PageB(target page).

Edit Dialog Properties

The following properties are written to JCR for the Navigation component and are expected to be available as Resource properties:

1. ./navigationRoot - the root page from which to build the navigation. It can be a blueprint master, language master or regular page.
2. ./structureStart - the start level of the navigation structure relative to the navigation root.
3. ./skipNavigationRoot - deprecated; if true, excludes the navigation root in the resulting tree, including its descendants only.
4. ./collectAllPages - if true, collects all pages that are descendants of the ./navigationRoot. Overrides ./structureDepth.
5. ./structureDepth - the depth of the navigation structure, relative to the navigation root.
6. ./accessibilityLabel - defines an accessibility label for the navigation.
7. ./disableShadowing - for redirecting pages PageA -> PageB. If true - PageA(original page) is shown. If false or not configured - PageB(target page).
8. ./id - defines the component HTML ID attribute.

Client Libraries

The component provides a 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.

BEM Description

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

Information

• Vendor: Adobe
• Version: v1
• Compatibility: AEM 6.3
• Status: production-ready
• Documentation: https://www.adobe.com/go/aem_cmp_navigation_v1
• Component Library: https://www.adobe.com/go/aem_cmp_library_navigation