Create a gist now

Instantly share code, notes, and snippets.

Breadcrumb when navigating folders in a Sharepoint 2010 Document Library WebPart. (Pure JS, No jQuery, IE8+) Can be inserted via a "HTML Form Web Part" or referenced in a custom masterpage.
.ms-WPHeader .breadcrumbs{
display:block;
font-style:italic;
}
.ms-WPHeader .breadcrumbs,.ms-WPHeader .breadcrumbs a{
font-size: 0.8em;
color:#D1D1D1;
}
/*
* Adds a breadcrumb to "Document Library" Web Parts
* Copyright 29/11/2013 - Alexis Nominé - MIT Licence
*/
_spBodyOnLoadFunctionNames.push("doBreadCrumbs");//execute after DOM loaded
function doBreadCrumbs(){
// Get 'RootFolder' value in URL
var rootStr = getUrlParam('RootFolder');
if (rootStr != '') {
// Get all links in WebParts titles (IE8+)
var webpartHeaders = document.querySelectorAll('.ms-WPTitle a');
// For each link
for(var i = 0; i < webpartHeaders.length; i++){
var webpartHeader = webpartHeaders[i];
// Get link target
var link = decodeURIComponent(webpartHeader.getAttribute('href'));
// If target contains 'RootFolder' value, then we have our Web Part.
// Let's generate our breadcrumb
if(rootStr.indexOf(link) != -1){
var path = rootStr.replace(link, ''); // Folder path, relative to Doc Lib
var basepath = rootStr.replace(path, ''); // Doc Lib path
var breadcrumb = '<span class="breadcrumb">';
breadcrumb += '<a href="' + location.pathname + '">Home</a>'; // link to base page
// Create link for each sub-folder
var folders = path.split('/');
for(var i = 1; i < folders.length; i++){
var currentfolder = folders[i];
basepath += "/" + currentfolder;
// Replace 'RootFolder' value in URL without touching any other variables(orderby, etc.)
var folderlink = window.location.search.replace('RootFolder=' + encodeURIComponent(rootStr), 'RootFolder=' + encodeURIComponent(basepath));
breadcrumb += ' &gt; <a href="' + folderlink + '">' + currentfolder + '</a>';
}
breadcrumb += '</span>';
// Insert breadcrumb
webpartHeader.parentNode.innerHTML += breadcrumb;
}
}
}
}
/* Get param value from query string */
function getUrlParam(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if (results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
@tyty4u2
tyty4u2 commented Jan 27, 2016

I am having a few issues with this script. My document library is "Documents" and here is what displays on the page.

DocumentsHome

I would like it to either hide "Documents" or read "Documents | Home", etc

The further I go in, it changes to DocumentsHome > Folder(1) > SubFolder(2) > SubFolder(3)

The problem when going more than a few folders deep, when you click the breadcrumb to go back, it doesn't navigate back. So if I am at "SubFolder(3)" and click "Folder(1)" to go back, it doesn't go back, it just stays on the current folder/page.

Any suggestions? Thanks in Advance!

@smkukhcit

I am sorry, but I am new to SharePoint customization. Can you tell me where I can find specific instructions on how to implement these like your breadcrumb post? I'd really like to implement this but am not sure how to do that.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment