I created a search page with search result web part, I can't find any documentation on how to customise the layout to include a breadcrumb for each result on SharePoint Online.

SharePoint "native" search result has it, and the breadcrumb is also clickable which opens the containing library. enter image description here

I could use the following code to show the full document URL, but I prefer the breadcrumb.

<span class="template_title example-themePrimary">{{getUrl item}}</span>

Does anyone have any experience in modifying the search result template?

  • I had the same issue a few weeks ago. I gave up on it. It involves learning a completely new (for me) language about splicing and formatting results and templates with "handlebars", and most likely code to publish these custom templates to your environment. I'm not a developer and I got totally lost. My initial goal was to use just a few custom filters with the standard search result, but that went nowhere fast.
    – teylyn
    Dec 13, 2020 at 23:59

2 Answers 2


Came here looking for help with the same problem, appreciate its 9 months late and not a fully formulated answer, but in your template find the line below:

<span class="template_title example-themePrimary"><a href="{{getUrl item}}">{{Title}}</a></span>

then add the following:

<span><a href="{{SitePath}}">{{SiteTitle}}</a> 
   {{#with (split OriginalPath Filename) as |filelocation|}}
      {{#eq (last (split (dirname filelocation) "/")) 'SitePages'}}
       > <a href="{{dirname filelocation}}">{{last (split (dirname filelocation) "/")}}</a>

you should have something similar to what you are looking for. Further improvements could be to handle multiple layers of folders.


Locate the layout file of your results page. You can try to understand the layout’s content and cross check with DOM elements on browser. If you can understand which line of code deals with which UI component then you can customize as you wish. But again there is no documentation I found when we were working. Take a copy of the actual layout, modify it as you play with it and refer it on search results page

  • I don't have any problem modifying the layout template or looking at the DOM element, what I need is the actual code behind to display the breadcrumb because the template uses a special code in the backend, etc. {{getUrl item}} Your answer doesn't really help much.
    – Jack Le
    Dec 14, 2020 at 0:36
  • That special code is the handlebar templates I mention in my comment above. You cannot see into the templates, because they are baked into the web part, and adding your own templates to the web part is complicated.
    – teylyn
    Dec 14, 2020 at 0:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.