How do I create a term driven breadcrumb trail?

Question

I'm working with SharePoint 2013 and I edited my html master page in SharePoint Designer to show a breadcrumb trail like we had in SharePoint 2010. The code is placed after the ID "DeltaPlaceHolderPageTitleInTitleArea" in the master page and it is as follows:

<!--SPM:<asp:sitemappath 
    runat="server" 
    sitemapprovider="SPContentMapProvider" 
    rendercurrentnodeaslink="true" 
    nodestyle-cssclass="breadcrumbNode" 
    currentnodestyle-cssclass="breadcrumbCurrentNode" 
    rootnodestyle-cssclass="breadcrumbRootNode" 
    SkipLinkText=""/>--> 

While this does indeed show a breadcrumb trail, it doesn't show it the way I hoped it to be. Let's say I have a site collection named "Intranet" and I'm on a subsite of it named "General". In the subsite "General", I'm on a page named "Introduction". This page (and all other pages of this subsite) are managed by term sets.

It would show a trail like this: Intranet > General > Introduction

But now, let's say that in my term set, I have 2 other terms which are child elements of the term "Introduction", these child elements(child terms) are named "History" and "Locations". If I were to be on the page "History", it would be just another page directly underneath the subsite "General".

It would show a breadcrumb trail like this: Intranet > General > History
While I would want it to show up like this: Intranet > General > Introduction > History

I'm a bit puzzled about this, since I don't seem to understand what I should do in order for the breadcrumb trail to detect what page is a child term and which one is the parent term and so on.

Thanks in advance for your help!

EDIT: Basically what I search for is something like the example in this blog. Just that I want to avoid using a web part. I'd want to make changes in either JavaScript or directly in the master page.

Answer 1

I've found a way to get a hierarchical breadcrumb by using the values of the term-driven subsite navigation! :)

By finding out which list item in the navigation is selected (meaning it has the url to the page you're on), I can loop through the list and collect all parent elements.
Based on those parent elements, I now know the hierarchy and can use the values of those elements to create a breadcrumb.

Here's a screenshot of the breadcrumb as we know it:
And here's a screenshot of the breadcrumb I currently have, with the help of JavaScript:
As you can see, it now shows the full path to a page. I have written a new post on my blog about my answer with all the necessary code, including the pieces of code you should add and replace in your master page.

Do feel free to ask if you are having problems with the code or if you need help.

Answer 2

As Robert says I easily can implement that utilizing SPTitleBreadcrumb in almost similar manner. Here is my html code in layout page:

<div id="modern-breadcrumb">
                <!--MS:<SharePoint:SPTitleBreadcrumb
                                 runat="server"
                                 RenderCurrentNodeAsLink="false"
                                 SiteMapProvider="CurrentNavigationTaxonomyProvider"
                                 ParentLevelsDisplayed="2"
                                 DefaultParentLevelsDisplayed="2" 
                                 RootNodeStyle-CssClass="home" 
                                 NodeStyle-CssClass="bc-node" 
                                 CurrentNodeStyle-CssClass="current" 
                                 PathSeparator="" 
                                 PathDirection="RootToCurrent">-->      
                <!--ME:</SharePoint:SPTitleBreadcrumb>-->
            </div>

Answer 3

The Term Property shows the current page Managed Metadata navigation taxonomy but doesn't provide hyperlinks.

 <!--CS: Start Term Property Snippet--><!--SPM:<%@Register Tagprefix="spsswc"  Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>--><!--SPM:<%@Register Tagprefix="ac679b743"  Namespace="Microsoft.SharePoint.Taxonomy" Assembly="Microsoft.SharePoint.Taxonomy, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>--><!--MS:<ac679b743:TermProperty runat="server" TermStoreID="00000000-0000-0000-0000-000000000000" TermSetID="00000000-0000-0000-0000-000000000000" TermID="00000000-0000-0000-0000-000000000000" Property="Path" Title="&#60;%$Resources:osrvcore,TermProperty_Title%&#62;" FrameType="None" SuppressWebPartChrome="True" Description="&#60;%$Resources:osrvcore,TermProperty_Description%&#62;" IsIncluded="True" ZoneID="ImportedPartZone" PartOrder="0" FrameState="Normal" AllowRemove="True" AllowZoneChange="True" AllowMinimize="True" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" DetailLink="" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="&#60;%$Resources:osrvcore,WebPartImportError%&#62;" ImportErrorMessage="&#60;%$Resources:osrvcore,WebPartImportError%&#62;" PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="True" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_9e235508_1981_4af3_afca_f5a52d0e66cf" ChromeType="None" ExportMode="All" Preview="&#60;div class=&#34;ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth &#34;&#62;  &#60;div WebPartID=&#34;00000000-0000-0000-0000-000000000000&#34; HasPers=&#34;true&#34; id=&#34;WebPartwpz2_g_9e235508_1981_4af3_afca_f5a52d0e66cf&#34; width=&#34;100%&#34; class=&#34;ms-WPBody noindex &#34; OnlyForMePart=&#34;true&#34; allowDelete=&#34;false&#34; style=&#34;&#34; &#62;&#60;div id=&#34;WebPartContent&#34;&#62;   [ TermProperty &#34;g_9e235508_1981_4af3_afca_f5a52d0e66cf&#34; ]  &#60;/div&#62;&#60;div class=&#34;ms-clear&#34;&#62;&#60;/div&#62;&#60;/div&#62; &#60;/div&#62;" __MarkupType="vsattributemarkup" __WebPartId="{9e235508-1981-4af3-afca-f5a52d0e66cf}" WebPart="true" Height="" Width="">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)-->[ TermProperty "Unnamed4" ]<!--PE: End of READ-ONLY PREVIEW--><!--ME:</ac679b743:TermProperty>--><!--CE: End Term Property Snippet-->

Or use JavaScript like this (needs a lot more work to fully functional)

<SCRIPT LANGUAGE="JavaScript">
 <!--
var path = "";
 var href = document.location.href;
 var s = href.split("/");
 for (var i=2;i<(s.length-1);i++) {
 path+="<A HREF=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+"</A> / ";
 }
 i=s.length-1;
 path+="<A HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</A>";
 document.writeln(path);
 //-->
 </script>

Answer 4

I was able to get a breadcrumb working with managed navigation using the following control in a master page

<SharePointWebControls:ListSiteMapPath runat="server"
    SiteMapProviders="GlobalNavigationTaxonomyProvider"
    RenderCurrentNodeAsLink="true" CssClass="s4-breadcrumb"
    NodeStyle-CssClass="s4-breadcrumbNode"
    CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
    RootNodeStyle-CssClass="s4-breadcrumbRootNode"
    HideInteriorRootNodes="true"
    SkipLinkText=""
    PathSeparator="">
</SharePointWebControls:ListSiteMapPath>

Answer 5

Another option is to utilize the SPTitleBreadcrumb control as shown below:

<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">

    <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
                                        <SharePoint:SPTitleBreadcrumb
                                 runat="server"
                                 RenderCurrentNodeAsLink="false"
                                 SiteMapProvider="CurrentNavigationTaxonomyProvider"
                                 ParentLevelsDisplayed="4"
                                 DefaultParentLevelsDisplayed="4" PathDirection="RootToCurrent">
                                    <PATHSEPARATORTEMPLATE>
                                        <SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />

           </PATHSEPARATORTEMPLATE>

      </SharePoint:SPTitleBreadcrumb>

 </asp:ContentPlaceHolder>

 </SharePoint:AjaxDelta>