Folder Navigation for List View WebPart in SharePoint 2013 and SharePoint Online.
Step 1: Create a notepad file and save as "FolderNavigation.html" and below code to this file.
Step 3: Add "Document Library" List WebPart in a page and make sure Chrome type should be any one of these.
1. Default
2. Title and border
3. Title only
Step 4: Add Content Editor WebPart, Edit Content Editor WebPart and provide Content Link as "/sites/dev/SiteAssets/foldernavigation/foldernavigation.html"
Content Editor WebPart Chrome Type: None.
Step 5:
Step 1: Create a notepad file and save as "FolderNavigation.html" and below code to this file.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ms-WPHeader .breadcrumbs {
display: block;
font-style: italic;
}
.ms-WPHeader .breadcrumbs, .ms-WPHeader .breadcrumbs a {
font-size: 0.8em;
color: #D1D1D1;
}
</style>
<!--
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-->
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("doBreadCrumbs");//execute after DOM loaded
function doBreadCrumbs() {
var rootStr = getUrlParam('RootFolder');
if (rootStr != '') {
//For
SharePoint online: '.ms-webpart-titleText a'
//For
SharPoint 2013: '.ms-WPTitle a'
var webpartHeaders = document.querySelectorAll('.ms-webpart-titleText a');
for (var i = 0; i < webpartHeaders.length; i++) {
var webpartHeader =
webpartHeaders[i];
var link = decodeURIComponent(webpartHeader.getAttribute('href'));
if (rootStr.indexOf(link) !=
-1) {
var path = rootStr.replace(link,
'');
var basepath =
rootStr.replace(path, '');
var breadcrumb = '<span class="breadcrumb">';
breadcrumb += '<a href="' +
location.pathname + '"> Home</a>';
var folders = path.split('/');
for (var i = 1; i <
folders.length; i++) {
var currentfolder = folders[i];
basepath += "/" +
currentfolder;
var folderlink =
decodeURIComponent(window.location.search).replace('RootFolder=' +
decodeURIComponent(rootStr), 'RootFolder=' + decodeURIComponent(basepath));
breadcrumb += ' > <a href="' + folderlink + '">' + currentfolder + '</a>';
}
breadcrumb += '</span>';
webpartHeader.parentNode.innerHTML += breadcrumb;
}
}
}
}
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, " "));
}
</script>
</head>
<body>
</body>
</body>
</html>
Step 2: Upload this "FolderNavigation.html" file into "Site Assets" Library.
1. Default
2. Title and border
3. Title only
Step 4: Add Content Editor WebPart, Edit Content Editor WebPart and provide Content Link as "/sites/dev/SiteAssets/foldernavigation/foldernavigation.html"
Content Editor WebPart Chrome Type: None.
