Breadcrumbv3

Breadcrumb allows navigation of the page hierarchy relative to the current page. It is commonly added to a page template, in the header or footer.

Using Core Components

Adobe Help Center

Examples

Standard

Simple breadcrumb with no configuration applied. Shows the current page in relation to the page hierarchy. As the Navigation Start Level defaults to 2, the first page listed is the Component Library root page (0 = /, and 1 = /content/). For pages with a redirection target, the title and the link of the redirection target will be used. Because of that, the second item in the list is also shown as Component Library, instead of Templating, as that child page redirects to its parent. The next child page with the title Hidden is not listed, because it is marked to be hidden from the navigation.

    
    

    
  1. 
        sling:resourceType:
        core-components-examples/components/breadcrumb
    
    2. 



    
        

    



    




    

    


    JSON

Navigation Start Level

In this example, we increase the Navigation Start Level to 3 to display a breadcrumb for a section one level lower in order to avoid the repeating Component Library page.

    
    

    
  1. 
        startLevel:
        3
    
    2. 

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



    
        

    



    




    

    


    JSON

Hide Current Page

By default, the current page is shown in the navigation. It is possible to configure a breadcrumb so that it is hidden.

    
    

    
  1. 
        startLevel:
        3
    
    2. 

    
  2. 
        hideCurrent:
        true
    
    3. 

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



    
        

    



    




    

    


    JSON

Show Hidden Navigation Items

By default, pages that are marked as Hide in Navigation are not displayed in the breadcrumb. It is possible to configure a breadcrumb so that they are shown.

    
    

    
  1. 
        startLevel:
        3
    
    2. 

    
  2. 
        showHidden:
        true
    
    3. 

    
  3. 
        hideCurrent:
        true
    
    4. 

    
  4. 
        sling:resourceType:
        core-components-examples/components/breadcrumb
    
    5. 



    
        

    



    




    

    


    JSON

Disable Shadowing

In the first example, notice how the second entry for the Templating page was listed as Component Library like the first entry, because that child page redirects to its parent page. If this shadowing behavior is undesired, it can be turned off like shown here.

    
    

    
  1. 
        disableShadowing:
        true
    
    2. 

    
  2. 
        hideCurrent:
        true
    
    3. 

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



    
        

    



    




    

    


    JSON

Built with Core Components 2.17.2.