SharePoint 2013 Branding: Show folder breadcrumbs as an inline breadcrumbs navigation

I’ve already shown you how to display the folder breadcrumb navigation. Now I’ll explain how you can show that structure inline as an always visible breadcrumbs navigation.

You should make the following changes in your custom masterpage. Here I’m using SharePoint 2013 HTML masterpage templates, but the same applies to the .master files.

Download the seattle.html masterpage and search for:

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

Inside it you’ll find the breadcrumb control that’s hidden by default.

We don’t need the whole control, only the ListSiteMapPath. You can copy that control into your own custom masterpage, to where you want your breadcrumbs to be.

This is the original code, if you don’t want to search for it in the seattle.html:

<!--SPM:<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="0" 
 NodeImageOffsetY="289" 
 NodeImageWidth="16" 
 NodeImageHeight="16" 
 NodeImageUrl="/_layouts/15/images/fgimg.png?rev=30" 
 RTLNodeImageOffsetX="0" 
 RTLNodeImageOffsetY="312" 
 RTLNodeImageWidth="16" 
 RTLNodeImageHeight="16" 
 RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=30" 
 HideInteriorRootNodes="true" 
 SkipLinkText=""/>--> 
 

Now you need to update its properties:

<!--SPM:<SharePoint:ListSiteMapPath 
 runat="server" 
 SiteMapProviders="SPSiteMapProvider,SPContentMapProvider" 
 RenderCurrentNodeAsLink="false" 
 PathSeparator="" 
 CssClass="my-breadcrumb" 
 NodeStyle-CssClass="my-breadcrumbNode" 
 CurrentNodeStyle-CssClass="my-breadcrumbCurrentNode" 
 RootNodeStyle-CssClass="my-breadcrumbRootNode" 
 NodeImageOffsetX="0" 
 NodeImageOffsetY="0" 
 NodeImageWidth="6" 
 NodeImageHeight="9" 
 NodeImageUrl="/_layouts/15/images/menu-right.gif?rev=30" 
 RTLNodeImageOffsetX="0" 
 RTLNodeImageOffsetY="0" 
 RTLNodeImageWidth="6" 
 RTLNodeImageHeight="9" 
 RTLNodeImageUrl="/_layouts/15/images/menu-right.gif?rev=30" 
 HideInteriorRootNodes="true" 
 SkipLinkText=""/>--> 
 

What was changed:

• CssClass, CurrentNodeStyle-CssClass and RootNodeStyle-CssClass, so that you can use them in the CSS.
• NodeImageOffsetX, NodeImageOffsetY, RTLNodeImageWidth, RTLNodeImageHeight, RTLNodeImageOffsetX, RTLNodeImageOffsetY, RTLNodeImageWidth, RTLNodeImageHeight. We’re using a different separator image, so these values must match the new image.
• NodeImageUrl, RTLNodeImageUrl. The new image, which is also a SharePoint 2013 default image, so you can use it directly in your code.

Now a bit of styling:

/* hide separator before root node */
.my-breadcrumbRootNode > .s4-breadcrumb-arrowcont {
 display: none;
}

ul.my-breadcrumb ul,
ul.my-breadcrumb li {
 display: inline;
}

/* spacing around separator arrow */
.s4-breadcrumb-arrowcont {
 margin: 0 10px;
}

/* fix separator img alignment */
.s4-breadcrumb-arrowcont > span.s4-breadcrumb {
 display: inline !important; 
 overflow: auto !important;
 position: static !important;
}

/* fix separator img alignment */
.s4-breadcrumb-arrowcont > span.s4-breadcrumb img {
 position: static !important;
} 

And we have an inline breadcrumb control: