Skip to main content


Implementing in the Custom Breadcrumb Rendering

Istock 1473508658

As we have discussed about in Sitecore and it’s benefits in my previous blog. We will be exploring the implementation of on components.

In this blog, I am taking a scenario where I will be implementing on the Custom Breadcrumb component in Sitecore.


  • Sitecore 9.1 and above
  • SXA

I am creating a clone of Breadcrumb (Out of the box) rendering in SXA and will modify the rendering to implement in it.

Following are the steps to clone and add in the Custom Breadcrumb rendering

  1. Navigate to /sitecore/layout/Renderings/Feature/Experience Accelerator/Navigation/Breadcrumb

  2. Right-click on the Breadcrumb rendering, click on scripts, then click on clone rendering

  3. A pop-up will appear; you can make the changes for the Rendering Name, Module, and Rendering CSS Class. Keep the settings for Parameters, Datasource, and View as given in Images

  4. Click on Proceed to complete the cloning process
  5. Add the rendering to Available Renderings so that it will be accessible on Experience Editor while editing. Navigate to /sitecore/content/Tenant-Name/Site-Name/Presentation/Available Renderings/Navigation and click on Edit (Renderings)
  6. Add the given <script> in CustomBreadcrumb.cshtml or In a script file to add the Schema Markup visible on the <head> tag of DOM

Note: I am adding the script in the cshtml file itself as an example. You can create a separate JavaScript file in the theme and add it accordingly.

<script type="text/javascript">
    function insertScript(tagToAdd, tags = null, updatedScript, deleteOtherNodes = false) { 
        if (!tagToAdd) return;
    var headElement = document.getElementsByTagName(tagToAdd)[0]; 
        if (tags && tags.length > 0) {
        document.getElementsByTagName(tagToAdd)[0].replaceChild(updatedScript, tags[0]);
    if (!deleteOtherNodes) return;
    for (let i = 1; i < tags.length; i++) {
        } else {
    const breadcrumb = document.querySelector(".breadcrumb");
    var breadcrumbItems = breadcrumb.querySelectorAll("nav ol li a");
    var breadcrumbList = []; 
    breadcrumbItems && breadcrumbItems.forEach((items,index) => {
        breadcrumbList.push({ "@@type": "ListItem", "position": index + 1, "name": items.title, "item": items.href }); 
    var schemaBreadcrumb = "[{ \"@@context\": \"\", \"@@graph\": [{ \"@@type\": \"BreadcrumbList\", \"itemListElement\":" + JSON.stringify(breadcrumbList)  + "}] }]";
    var prevTags = document.getElementsByTagName('head')[0].querySelectorAll("script[type='application/ld+json'");
    prevTags = Array.from(prevTags); 
    prevTags = prevTags.filter((p) => p.innerHTML.indexOf("@@graph") > -1);
    var newScript = document.createElement('script');
    newScript.type = 'application/ld+json';
    newScript.innerHTML = schemaBreadcrumb;
    insertScript('head', prevTags, newScript, true);

The markup will appear inside the <head> tag inside DOM and will look like this


We have successfully added to the Custom Breadcrumb Sitecore component.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Niranjan Sadhu

More from this Author

Follow Us