Navigationv2

Navigation allows an author to build a site navigation. It is commonly added to a page template, in the header or footer.

When added to a page template, if the configured Navigation Root is in a live copy blueprint or language copy master, then the navigation displayed on the pages resulting from this template will display the navigation structure that the accessed page is located in.

Examples

Standard

The default behavior of the navigation component is to generate a nested navigation structure from the configured page tree. It will collect all child pages by iterating deeply through the entire page hiearchy. When not configured otherwise, the root page will be excluded, and all pages that are marked to be hidden from the navigation will not be listed. The text shown for each linked page is the Navigation Title when provided by the page, or the main page Title otherwise. Pages that have a redirection target to other pages, like the Breadcrumb and the Language Navigation pages will be linked directly to the redirection target, from which also the title is taken.

    
    

    
  1. 
        navigationRoot:
        /content/core-components-examples/library
    
    2. 

    
  2. 
        sling:resourceType:
        core-components-examples/components/navigation
    
    3.

Show Root Page

In this example we display the root page that is hidden by default by reducing the Exclude Root Levels option to zero.

    
    

    
  1. 
        navigationRoot:
        /content/core-components-examples/library
    
    2. 

    
  2. 
        sling:resourceType:
        core-components-examples/components/navigation
    
    3. 

    
  3. 
        structureStart:
        0
    
    4.

Starting Level

Multiple root levels can be skipped. In this example, setting the Exclude Root Levels to 2 shows then only shows the leaf pages.

    
    

    
  1. 
        navigationRoot:
        /content/core-components-examples/library
    
    2. 

    
  2. 
        sling:resourceType:
        core-components-examples/components/navigation
    
    3. 

    
  3. 
        structureStart:
        2
    
    4.

Structure Depth

By default, the navigation is lists all child pages. In this example, we disabling the option to Collect all child pages, and then reduce Navigation Structure Depth to the first level only. 

    
    

    
  1. 
        navigationRoot:
        /content/core-components-examples/library
    
    2. 

    
  2. 
        sling:resourceType:
        core-components-examples/components/navigation
    
    3. 

    
  3. 
        collectAllPages:
        false
    
    4. 

    
  4. 
        structureDepth:
        1
    
    5.

Disable Shadowing

In the previous examples, notice how the Breadcrumb and the Language Navigation pages that redirect to a much deeper child page were linked directly to the target page. This allows authors to create menu structures that can be different from the actual page hierarchy.

The example below shows how that automatic linking to the target page can be disabled (listing only the templating section).

    
    

    
  1. 
        disableShadowing:
        true
    
    2. 

    
  2. 
        navigationRoot:
        /content/core-components-examples/library/core-structure
    
    3. 

    
  3. 
        sling:resourceType:
        core-components-examples/components/navigation
    
    4.

Accessibility Landmark

By default, the navigation component has a navigation role applied. Authors can change this to a different value if desired, like below where a Secondary Navigation role is set (listing only the templating section).

    
    

    
  1. 
        navigationRoot:
        /content/core-components-examples/library/core-structure
    
    2. 

    
  2. 
        accessibilityLabel:
        Secondary Navigation
    
    3. 

    
  3. 
        sling:resourceType:
        core-components-examples/components/navigation
    
    4.

Built with Core Components 2.27.0.