As usual this tip started as a request in the PnP Modern Search repository, How to show breadcrumb in Search results as in SharePoint Online search · microsoft-search/pnp-modern-search · Discussion #4094
The request is: How do I get a Breadcrumb (file path) in my results layout?
A Breadcrumb is a series of links to the various segments of a SharePoint URL, like:
SharePoint-> Site Name-> Document library or List Name->Folder
Why would I use Breadcrumb in my layout?
In most cases you would show the Title of the document in one of the first columns, and by default that column would be a hyperlink to the document.
But if you want to make it easy for the end users to update the metadata, getting a sharing link or similar, then you must provide a link to library, or to the folder in which the document is stored, hence the breadcrumb.
The first time I saw that request was in 2010ish, and each time it showed up, I just reused the same approach as last time.
In my case I mapped the Site Title and the Library Name to a couple of RefinableStrings, and added this in the Results Layout:
<a href="https://tcwlv.sharepoint.com/sites/{{RefinableString00}}" target="_blank" data-interception=off title="Open site">{{RefinableString00}}></a> >
<a href="https://tcwlv.sharepoint.com/sites/{{RefinableString00}}/{{RefinableString04}}" target="_blank" data-interception=off title="Open Library">{{RefinableString04}}></a>
However, in January 2024 Lauri Böhm came up with a generic solution, the PnP-Breadcrumb, Builtin web components - PnP Modern Search (v4)
You can use this approach both in the layouts and in the Handlebars expression, and in general this is the recommended solution.
The description of the properties within the PnP-Breadcrumb is available in the link above.
You can also include the component in your custom layouts:
And it looks like this:
In the PnP Modern Search project we are considering including PnP-Breadcrumb in the Out Of The Box Layouts, either as a default part of the Layouts or as an option in the configuration.
Keep an eye on the change log in 2025 :-)
تعليقات