Skip to content

Instantly share code, notes, and snippets.

@alexisnomine
Last active October 12, 2020 14:55
Show Gist options
  • Save alexisnomine/7707695 to your computer and use it in GitHub Desktop.
Save alexisnomine/7707695 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

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!

@mikezimm
Copy link

@tyty4u2 @smkukhcit @alexisnomine

I made a small change to the code to get it to work in our environment... not sure if it's because I'm on SP2016 or because I'm on a wiki style page but this worked great:

			if(rootStr.indexOf(link) != -1){
				var path = rootStr.replace(link, ''); // Folder path, relative to Doc Lib
				var basepath = rootStr.replace(path, ''); // Doc Lib path
				
                                //2020-10-12 @mikezimm:  Added padding-left in span style to get some spacing
				var breadcrumb = '<span style="padding-left: 30px" class="breadcrumb">';

                                //2020-10-12 @mikezimm:  Change "Home" to "Top (to make less confusing to me)
				breadcrumb += '<a href="' + location.pathname + '">Top</a>'; // link to base page
				
				// Create link for each sub-folder
				var folders = path.split('/');
				for(var i = 1; i < folders.length; i++){

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