AlertThis post is over a year old, some of this information may be out of date.
Transform the “SharePoint” Suite Bar Text into a Breadcrumb with PowerShell
March 11, 2013
Where is the breadcrumb in SharePoint 2013? There isn’t one out-of-the-box, but this post helps you to get one back.
The out-of-the-box Seattle or Oslo master pages don’t have a breadcrumb located in their HTML markup. That makes navigating from sub-sites to their parent site difficult, if you have not set a good global navigation structure.
This got me thinking about a solution to create a breadcrumb that could easily be added to the SharePoint sites.
The Idea
A few weeks ago I was playing with the SuiteBarBrandingElementHtml property to change the SharePoint text in the top left corner to my company name.
Note: there are already a few blog posts about this topic, so I will not explain this. Here is the blog post of Tobias Zimmergren on how you could change the text: Change the “SharePoint” text in the top left corner.
Changing the SharePoint text to your company name could be nice if you want some extra visibility, but still I find it a bit of unused space.
So this was the starting point of my idea, what if this could be replaced with a usable breadcrumb? That would certainly make navigating through sites a bit easier.
The Solution
The SuiteBarBrandingElementHtml element only allows html code to be added, because it will just show it as plain text on your page. My approach is to make use of some SharePoint ECMAScript to retrieve the parent sites of the current site you are on, and create a breadcrumb with this information.
(function(){if(document.addEventListener){document.addEventListener('DOMContentLoaded',function(){EnsureScriptFunc('sp.js','SP.ClientContext',JavascriptBreadcrumb);},false);}else{window.setTimeout(function(){EnsureScriptFunc('sp.js','SP.ClientContext',JavascriptBreadcrumb);},0);}functionJavascriptBreadcrumb(){this.elm=document.getElementById('javascript-breadcrumb');// Show the list link
varlist="";if(ctx!==null&&typeofctx!=="undefined"&&_spPageContextInfo.pageListId!==null&&typeof_spPageContextInfo.pageListId!=="undefined"){if(ctx.listName!==null&&typeofctx.listName!=="undefined"){if(_spPageContextInfo.pageListId.toUpperCase()==ctx.listName.toUpperCase()){list="<a href='"+ctx.listUrlDir+"' title='"+ctx.ListTitle+"' style='color:#fff'>"+ctx.ListTitle+"</a> > ";// Check if you are inside a folder
if(typeofctx.rootFolder!=="undefined"&&ctx.rootFolder!==""){varlistUrl=decodeURIComponent(ctx.listUrlDir);varrootFolder=decodeURIComponent(ctx.rootFolder);rootFolder=rootFolder.replace(listUrl,"");varfolders=rootFolder.split("/");for(vari=0;i<folders.length;i++){if(folders[i]!==""&&typeoffolders[i]!=="undefined"){listUrl=listUrl+"/"+folders[i];list+="<a href='"+listUrl+"' title='"+folders[i]+"' style='color:#fff'>"+folders[i]+"</a> > ";}}}}}}this.breadcrumb="<a href='"+_spPageContextInfo.webAbsoluteUrl+"' style='color:#fff;'>"+_spPageContextInfo.webTitle+"</a> > "+list+"<span style='font-style:italic;'>"+document.title+"</span>";this.elm.innerHTML=this.breadcrumb;varclientContext=newSP.ClientContext.get_current();this.web=clientContext.get_web();this.parentweb=this.web.get_parentWeb();clientContext.load(this.parentweb);clientContext.executeQueryAsync(Function.createDelegate(this,onQuerySuccess),Function.createDelegate(this,onCreationFail));}functiononQuerySuccess(){try{if(typeofthis.parentweb.get_title()!=="undefined"&&this.parentweb.get_title().toLowerCase()!=="intranet"){this.breadcrumb="<a href='"+this.parentweb.get_serverRelativeUrl()+"' style='color:#fff'>"+this.parentweb.get_title()+"</a>"+" > "+this.breadcrumb;this.elm.innerHTML=this.breadcrumb;varclientContext=newSP.ClientContext(this.parentweb.get_serverRelativeUrl());this.web=clientContext.get_web();this.parentweb=this.web.get_parentWeb();clientContext.load(this.parentweb);clientContext.executeQueryAsync(Function.createDelegate(this,onQuerySuccess),Function.createDelegate(this,onCreationFail));}}catch(e){}}functiononCreationFail(){}})();
As you can see it is not that difficult. The event listener is very important if MDS (Minimal Download Strategy) is enabled on your site, so this may not be removed (when it is removed, your breadcrumb will not render).
PowerShell Script
Applying this breadcrumb to your sites will be done via the web application SuiteBarBrandingElementHtml property. To do this you could use the following script:
This solution won’t work on SharePoint Foundation farms, on these farms the SocialRibbonControl feature is not present. A workaround could be to create your own solution (with an element file) to apply the control to the pages.