Create a modern breadcrumb navigation on SharePoint

Today adds the breadcrumb navigation to all SharePoint pages, using the breadcrumb style defined by the Fabric UI.

<div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop">
<div
class="ms-breadcrumb-top">
<div class="ms-breadcrumb-dropdownBox" style="display:none;">
<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">
<SharePoint:PopoutMenu
Visible="false"
runat="server"
ID="GlobalBreadCrumbNavPopout"
IconUrl="/_layouts/15/images/spcommon.png?rev=23"
IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
ThemeKey="v15breadcrumb"
IconOffsetX="215"
IconOffsetY="120"
IconWidth="16"
IconHeight="16"
AnchorCss="ms-breadcrumb-anchor"
AnchorOpenCss="ms-breadcrumb-anchor-open"
MenuCss="ms-breadcrumb-menu ms-noList">
<div class="ms-breadcrumb-top">
<asp:Label runat="server" CssClass="ms-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>" />
</div>
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<SharePoint:ListSiteMapPath
runat="server"
SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
RenderCurrentNodeAsLink="false"
PathSeparator=""
CssClass="ms-breadcrumb"
NodeStyle-CssClass="ms-breadcrumbNode"
CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
RootNodeStyle-CssClass="ms-breadcrumbRootNode"
NodeImageOffsetX="217"
NodeImageOffsetY="210"
NodeImageWidth="16"
NodeImageHeight="16"
NodeImageUrl="/_layouts/15/images/spcommon.png?rev=23"
RTLNodeImageOffsetX="199"
RTLNodeImageOffsetY="210"
RTLNodeImageWidth="16"
RTLNodeImageHeight="16"
RTLNodeImageUrl="/_layouts/15/images/spcommon.png?rev=23"
HideInteriorRootNodes="false"
SkipLinkText="" />
</asp:ContentPlaceHolder>
</SharePoint:PopoutMenu>
</SharePoint:AjaxDelta></div>


<h1 name="onetidProjectPropertyTitle" class="bread_h1">
                                        <asp:ContentPlaceHolder ID="PlaceHolderSiteName" runat="server">
<ASP:SITEMAPPATH runat="server" hideinteriorrootnodes="true" rootnodestyle-cssclass="ms-breadcrumbRootNode" currentnodestyle-cssclass="ms-breadcrumbCurrentNode" nodestyle-cssclass="ms-breadcrumbRootNode" rendercurrentnodeaslink="true" sitemapproviders="SPSiteMapProvider,SPXmlContentMapProvider">
</ASP:SITEMAPPATH>                                        </asp:ContentPlaceHolder>
                                    </h1>
                                    <span id="onetidPageTitleSeparator" class="s4-nothome s4-bcsep s4-titlesep">
                                     
                                    </span>
                                 


</div>




<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"
  SkipLinkText=""><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;" data-accessibility-nocheck="true">
  <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>
</div>