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.

breadcrumbs.css

.ms-WPHeader .breadcrumbs{
	display:block;
	font-style:italic;
}
.ms-WPHeader .breadcrumbs,.ms-WPHeader .breadcrumbs a{
	font-size: 0.8em;
	color:#D1D1D1;
}

breadcrumbs.js

/* 
* 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, " "));
}

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!

@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++){