Enable breadcrumb and Implement Classic Breadcrumb in SharePoint 2013

This SharePoint 2013 tutorial explains how to enable breadcrumb in SharePoint Online/2013/2016 sites. By default, the breadcrumb is disabled in SharePoint 2013 sites. We can enable the breadcrumb by doing some minor changes in the SharePoint 2013 master page.

I will also show you how we can add the classic SharePoint 2010 breadcrumb in our SharePoint 2013/2016 or SharePoint Online sites.

Enable breadcrumb in SharePoint Online/2013/2016

In SharePoint 2013 they have not removed the breadcrumb, they just hide it in the master page. To Enable breadcrumb in SharePoint 2013, follow the below steps.

Open your master page in SharePoint 2013 designer.

Then open your master page and then search for the below tag which should appear like below:

enable breadcrumb sharepoint 2013
enable breadcrumb sharepoint 2013
<div class="ms-breadcrumb-dropdownBox" style="display:none;">

Here remove the style=”display:none;” tag from it. So it should look like below:

<div class="ms-breadcrumb-dropdownBox">

Then you can see the below tag.

<SharePoint:PopoutMenu Visible="false" runat="server" ID="GlobalBreadCrumbNavPopout"

So here chage Visible=”false” to Visible=”true”, so it should look like below:

<SharePoint:PopoutMenu Visible="true" runat="server" ID="GlobalBreadCrumbNavPopout"

And it should appear like below:

enable breadcrumb sharepoint online
enable breadcrumb sharepoint online

Implement Classic Breadcrumb in SharePoint 2013 like SharePoint 2010

To implement the classic breadcrumb like SharePoint 2010, You can just use the below tag where ever you want in the master page.

You can try below options:

<asp:SiteMapPath runat="server" SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider" RenderCurrentNodeAsLink="false" NodeStyle-CssClass="breadcrumbNode" CurrentNodeStyle-CssClass="breadcrumbCurrentNode" RootNodeStyle-CssClass="breadcrumbRootNode" HideInteriorRootNodes="true" SkipLinkText=""/>

<asp:SiteMapPath runat="server" SiteMapProviders="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" NodeStyle-CssClass="breadcrumbNode" CurrentNodeStyle-CssClass="breadcrumbCurrentNode" RootNodeStyle-CssClass="breadcrumbRootNode" HideInteriorRootNodes="true" SkipLinkText=""/>

If you want your list or libraries to appear here in breadcrumb then you can use the below option.

<asp:SiteMapPath runat="server" SiteMapProviders="SPContentMapProvider" RenderCurrentNodeAsLink="false" NodeStyle-CssClass="breadcrumbNode" CurrentNodeStyle-CssClass="breadcrumbCurrentNode" RootNodeStyle-CssClass="breadcrumbRootNode" HideInteriorRootNodes="true" SkipLinkText=""/>

You can also add in the html master page in design manager like below:

<!–MS:<asp:SiteMapPath runat="server" SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider" RenderCurrentNodeAsLink="false" NodeStyle-CssClass="breadcrumbNode" CurrentNodeStyle-CssClass="breadcrumbCurrentNode" RootNodeStyle-CssClass="breadcrumbRootNode" HideInteriorRootNodes="true" SkipLinkText=""/>–>

or you can also check like below:

<div id="Breadcrumbs">
<!–SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">–>
<!–SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">–>
<!–MS:<asp:sitemappath runat="server" sitemapproviders="SPSiteMapProvider,SPXmlContentMapProvider" rendercurrentnodeaslink="false" hideinteriorrootnodes="true">–>
<!–ME:</asp:sitemappath>–>
<!–SPM:</asp:ContentPlaceHolder>–>
<!–SPM:</SharePoint:AjaxDelta>–>
</div>

Here in all these options, the changes is in the SiteMapProviders option.

You may like following SharePoint tutorials:

Hope this SharePoint 2013 tutorial helps to enable breadcrumb in SharePoint Online and in SharePoint 2013/2016.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>