Adding SharePoint 2010 style breadcrumbs to SharePoint 2013

As many users of SharePoint 2013 know, Microsoft has removed the standard breadcrumb feature that many users have become accustomed to in earlier versions of SharePoint including and up to SharePoint 2010.

Of course, if you look at a brand new installation of SharePoint 2013, you will notice that that feature is notably absent:

If you dig all over the Internet using Google or a search engine of your choice, you will not likely find an answer to replace the beloved breadcrumb functionality in EXACTLY the same way.  Most of the articles refer to provide an icon which provides TreeView navigation through the Site Hierarchy.

Well, fortunately, I was digging around the SharePoint 2013 TechNet forums and came upon this wonderful posting: http://social.technet.microsoft.com/Forums/sharepoint/en-US/15b5fa4a-7a8a-47b3-947b-ef430468fd16/sharepoint-2013-subsite-breadcrumb-not-showing?forum=sharepointcustomization

Of course, as with many postings, they do not often work on the 1st try!!

However the solution posted by the user was VERY, VERY close to the actual solution required.

Finally, I needed to alter the actual XML used by the site to get it to render correctly.  Instead of using the SiteMapProviders attribute, I simply used SiteMapProvider and set the value to SPContentMapProvider.

This was my resultant XML in my customized Oslo Master Page:

<h1 id="pageContentTitle" class="ms-belltown-pageName ms-noWrap ms-dialogHidden" style="display:none">

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

        <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">

          <SharePoint:SPTitleBreadcrumb

              runat="server"

              RenderCurrentNodeAsLink="true"

              SiteMapProvider="SPContentMapProvider"

              WelcomePageUsesWebTitle="false">

            <PATHSEPARATORTEMPLATE>

              <SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />

            </PATHSEPARATORTEMPLATE>

          </SharePoint:SPTitleBreadcrumb>

        </asp:ContentPlaceHolder>

    </SharePoint:AjaxDelta>

</h1>

<h1>

<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">

<asp:SiteMapPath ID="SiteMapPath1"

 runat="server"

 SiteMapProvider="SPContentMapProvider"

 RenderCurrentNodeAsLink="false"

 NodeStyle-CssClass="breadcrumbNode"

 CurrentNodeStyle-CssClass="breadcrumbCurrentNode"

 RootNodeStyle-CssClass="breadcrumbRootNode"

 SkipLinkText=""/>

</asp:ContentPlaceHolder>

</h1>

After making this change and publishing my custom Master Page (and of course setting it as the Default Master Page through Site Settings-->Master Page), I was able to view this in the navigation of my SharePoint 2013 Publishing Site:

If you need to update the Seattle Master Page, you will need to use the following code:

<h1 id="pageTitle" class="ms-core-pageTitle" style="display:none">

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

    <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">

        <SharePoint:SPTitleBreadcrumb

              runat="server"

              RenderCurrentNodeAsLink="true"

                  SiteMapProvider="SPContentMapProvider"

              CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">

        <PATHSEPARATORTEMPLATE>

          <SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />

        </PATHSEPARATORTEMPLATE>

      </SharePoint:SPTitleBreadcrumb>

    </asp:ContentPlaceHolder>

  </SharePoint:AjaxDelta>

  <SharePoint:AjaxDelta BlockElement="true" id="DeltaPlaceHolderPageDescription" CssClass="ms-displayInlineBlock ms-normalWrap" runat="server">

    <a href="javascript:;" id="ms-pageDescriptionDiv" style="display:none;">

      <span id="ms-pageDescriptionImage">&#160;</span>

    </a>

    <span class="ms-accessible" id="ms-pageDescription">

      <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />

    </span>

    <SharePoint:ScriptBlock runat="server">

        _spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout");

    </SharePoint:ScriptBlock>

  </SharePoint:AjaxDelta>

</h1>

<h1>

<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server" >

    <asp:SiteMapPath ID="SiteMapPath1"

     runat="server"

     SiteMapProvider="SPContentMapProvider"

     RenderCurrentNodeAsLink="false"

     NodeStyle-CssClass="breadcrumbNode"

     CurrentNodeStyle-CssClass="breadcrumbCurrentNode"

     RootNodeStyle-CssClass="breadcrumbRootNode"

     SkipLinkText=""/>

    </asp:ContentPlaceHolder>

</h1>

This was what the resultant breadcrumb looks like on the Seattle Master Page: