Folders in document libraries: how to navigate back up to parent folder (web part on page)?

Question

I have a document library web part on a page and it contains a folder. When a user clicks on the folder it opens and shows the documents inside, but there is no way to go back to the parent folder unless they go to the previous page or use the subsite navigation to go back to that page.

Is there a way to add some sort of link, or button, to that web part? Like when I open the folder, I get to see a button or link named "back to main folder" which returns me to the normal view? I did not find much about it online, so I am hoping someone here might have an idea to do this. I was considering using JavaScript but if there already is a solution to this then I'd prefer using that.

Thanks in advance!

Answer 1

See SharePoint Document Library List View Web Part with Clickable Breadcrumbs

Excerpt from article:

1. The first step is to create a text file that will contain the javascript necessary to generate the clickable breadcrumbs. I called my file LibraryViewBreadCrumbs.txt. Insert the following javascript text in to the file.

<script type="text/javascript">

// Variable to store the text used by SharePoint to generate the breadcrumb separator arrows

     var SeparatorArrow = '<span id="onetidPageTitleSeparator"><span><span style="height:11px;width:11px;position:relative;display:inline-block;overflow:hidden;"><img src="/_layouts/images/fgimg.png" alt=":" style="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" /></span></span> </span>';

     var baseURL = (document.location).toString();

     baseURL = baseURL.substring(0,baseURL.indexOf(".aspx")+5);



     var url = baseURL;                             

     url = baseURL + '?RootFolder=';



     var rootFolder = unescape(GetUrlParameter('RootFolder'));      

     var path = GetFolderPath(rootFolder);   

     rootFolder = rootFolder.substring(0,rootFolder.indexOf(path));  

     if(path.length > 0)

     {

         var folders = path.split('/');

         for(var i=0; i < folders.length; i++)

         {

              if(i==0)                             

                    url += encodeURIComponent(rootFolder.substring(0,rootFolder.length-1));

              url += encodeURIComponent('/' + folders[i]);

              //insert row
              **var urlok=url.replace('%2F%2F','%2F')**

              if(i<folders.length-1)

              {

                   //Add the folder link and separator arrows if more than one folder level deep
                   // and change URL to URLOK down
                   document.write('<a href="' + urlok + '&FolderCTID=' + GetUrlParameter("FolderCTID") + '&View=' + GetUrlParameter("View") + '">' + folders[i] + '</a>');

                   document.write(SeparatorArrow);

              }

              else
              {
                   if(folders.length>1)
                        document.write(folders[i]);
              }             
         }
     }  

// Gets the value of the requested URL Parameter
function GetUrlParameter( name )
{
     name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

     var regexS = "[\\?&]"+name+"=([^&#]*)";

     var regex = new RegExp( regexS );

     var results = regex.exec( window.location.href );

     if( results == null ) return "";

     else return results[1];
}



// Gets the name of the library

function GetFolderPath(rootFolder)

{

     var domain = window.location.hostname;

     var web = baseURL.substring(baseURL.indexOf(domain)+domain.length);

     var path = rootFolder.substring(GetFirstBreakIndex(web, rootFolder));

     return path;

}



// Gets the first different character occurrence index

function GetFirstBreakIndex(a, b)

{

     var slashIndex = -1;

     var equalsReturnCode = -1;

     if (a && b)

     {

          var longest = b.length > a.length ? b : a;

          var shortest = a.length > b.length ? b : a;



          for(var i=0; i < shortest.length; i++)

          {

               // Get location of each / as a breakpoint if

               // the first break index is part way into the string

               if(shortest.charAt(i) == '/')

                    slashIndex = i;

               if(shortest.charAt(i) != longest.charAt(i))

               {

                    if(i-slashIndex == 1)

                         return i;

                    else

                         return slashIndex + 1;

               }

          }

     }

     else

     {

          return equalsReturnCode;

     }

}

</script>

2. Save this file to the SharePoint site in a library that all users have access to. I stored mine in a Scripts folder in the Site Assets library.

3. Edit the home page of the site to insert a Web Part.

4. Select and Add a Content Editor web part in the Media and Content category.

5. Edit the web part that was just added to the page. In the Content Link block enter the location of the text file saved in step 2 above.

6. You may want to update the Title property to something that notifies other administrator users who can edit that page that this Content Editor web part should not be deleted. I labeled mine with Breadcrumbs Script (Do Not Delete). Then hide the title by setting the Chrome Type to None.

This simply manipulates the URL of the Folder hierarchies and generates Breadcrumb for Document Library.. So it should be irrespective of SharePoint version and should work in 2013.

UPDATE

SharePoint 2013 Folder Navigation for List View Web Part

This one is specifically for SP 2013, uses JSLink to create the breadcrumb.