How to show breadcrumb in Search results as in SharePoint Online search

[vishalgoyal2472]

How can we show breadcrumb as displayed in 2nd row in below image, Below image is of SharePoint online default search result

[kasperbolarsen]

like this?

[vishalgoyal2472]

I corrected that property and below is screenshot but its still not showing in search result but showing in browser

[patrikhellgren]

I just tested with your first example with hard coded properties (as the breadcrumb doesn't care if we have valid urls) and with a corrected data-site-url and just below the results count in the details list layout like this:

              {{#if @root.properties.showResultsCount}}
                <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
                <pnp-breadcrumb 
                  data-path="https://doamin-my.sharepoint.com/personal/vishal_goyal-c_com/Documents/Desktop/User Data/Profile 7/Extensions/nmmhkkegccagdldgiimedpiccmgmieda/1.0.0.6_1/craw_window.js" 
                  data-site-url="https://doamin-my.sharepoint.com/personal/vishal_goyal-c_com" 
                  data-web-url="https://doamin-my.sharepoint.com/personal/vishal_goyal-c_zurichna_com" 
                  data-entity-title="craw_window" 
                  data-entity-file-type="js" 
                  data-include-site-name="false" 
                  data-include-entity-name="true" 
                  data-breadcrumb-items-as-links="true" 
                  data-max-displayed-items="3" 
                  data-overflow-index="0" 
                  data-font-size="12"> 
                </pnp-breadcrumb>
              {{/if}}

After that I get this result so that is working:

Since you see it in the browsers dev tools it must be hidden by css or inline styling. See if you can see a display:none in the Elements Style panel for this element or any of its parents. Can you post more of your layout since it is hard to see what is wrong by only seeing the single element.

[vishalgoyal2472]

below is the attached file for layout, thank you!!

layout.json

[patrikhellgren]

I just tested with your layout and it works correct for me.

What version of PnP Modern Search are you using, you didn't specify that in your initial post. It could be that you are not using 4.10.2 or later (the breadcrumb component was introduced in that version) which would give the result you are seeing.

[vishalgoyal2472]

I am using 4.6.1 version , can I upgrade my current to latest without affecting my current sites configurations which is already in use.

[kasperbolarsen]

Your current version is several versions old, but you should be able to upgrade without issues. If you want to check it before doing it, you can set up an app catalog on a Site Collection, and install the newest version in that site collection only

…

On Fri, Nov 22, 2024, 17:20 vishalgoyal2472 ***@***.***> wrote: I am using 4.6.1 version , can I upgrade my current to latest without affecting my current sites configurations which is already in use. image.png (view on web) <https://github.com/user-attachments/assets/5d1f9da4-a37a-4da5-ac91-09172efc362f> — Reply to this email directly, view it on GitHub <#4094 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE5DXIVKBH4ZWIIFU7PONDT2B5KVFAVCNFSM6AAAAABRTHIXRSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMZVGA4TQNY> . You are receiving this because you commented.Message ID: <microsoft-search/pnp-modern-search/repo-discussions/4094/comments/11350987 @github.com>