Inexcusably, SharePoint has no true breadcrumb navigation. In document libraries, navigating up and down the folder hierarchy is a painful series of pageloads. Fortunately, there are options.

Update from Future Shawn: This is no longer an issue in SharePoint Online, part of Office 365. I got 99 problems, but an on-prem SharePoint server ain’t one, son!

If you have access to the server, you can create a custom code solution in SharePoint Designer or Visual Studio and serve it up. But before devoting resources to a server configuration change and all that entails, there’s a client side option that’s much easier to implement, and a user by the name of alexisnomine has done just that.

You may have noticed the URL string contains the folder path, and Alexisnomine has written the requisite javascript to filter that string and write in a real fully-navigable breadcrumb for SharePoint document libraries. Take a look!

The modified web part title now includes a link to each level in the folder hierarchy leading to the present view.
The modified web part title now includes a link to each level in the folder hierarchy leading to the present view.

As a user of document libraries with folders up to a dozen levels deep, this is much appreciated.  The best part about alexisnomine’s solution is the simplicity, it’s pure javascript and CSS, with no dependencies like jQuery or other outside libraries.  This means it works in IE8+, and creates no additional load on the server.

One note I will make, be sure the “title” option is set for the document library web part, which is not the default in SharePoint 2010. If it is not showing, the breadcrumb will be hidden. It’s also simple enough to modify the javascript to draw the breadcrumb to another element elsewhere on the page.

web part

PS. Check out alexinomine’s other Gists for great code snippets. With this inspiration I will be setting up a similar repository, look for the link soon.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.