Adding a Breadcrumb to Document Library Web Parts in Sharepoint 2010

    Written by Alexis Nominé on . Posted in SharePoint

    A little snippet to add the missing breadcrumb to Document Library Web Parts in Sharepoint 2010. Useful when browsing sub-folders!

    Trackback from your site.

    Comments (23)

    • Pawel

      |

      Thank you 🙂 It`s working perfectly. I just made some modification on line 42. I add a new span element on the page and use append() the breadcrumb on it. But your solution is perfect 🙂 THANK you

      Reply

      • Bhavesh

        |

        Hi,

        In subfolders link is not working properly.

        Reply

        • Philani

          |

          Hi,

          Were you able to fix the subfolder links issue?

          Reply

          • alex

            |

            This is not working correctly.

            All the breadcrumbs are linking to same (last) folder in the navigation instead of to each subfolder individually. The code seems to be correct, so I’m not sure why this is happening.

            Alexis please help!

            Reply

    • Brett

      |

      This did not work for me, I couldn’t see any changes to the document library.
      It would be good if you show what the end result suppose to look like in the document library.

      Reply

    • Darren

      |

      Thanks for sharing, very useful for me where the designer had decided to hide the standard breadcrumb.

      I found I needed to change the encodeURIComponent() calls to use SP.Utilities.HttpUtility.urlKeyValueEncode() on line 35 otherwise folder names with spaces, “.” or “()” did not work.

      Reply

    • tinoargentino

      |

      Hi! Where do I have to paste this script in order for it to work? Thanks in advance!!!

      Reply

      • Alexis Nominé

        |

        You could insert a “Content Editor” or “Form” web part in your page and paste the script between <script> </script> tags (and the css between <style> </style> tags)

        Reply

        • valentin

          |

          Thanks! One more question, which part of the script do I have to change so it references the list in the wikipage I want it to?

          Reply

          • Alexis Nominé

            |

            It’s supposed to detect automatically the right DocLib web part automatically. Isn’t it working for you?

            Reply

    • Uli

      |

      Does this also work with SharePoint 2013?

      Reply

      • Alexis Nominé

        |

        It’s not been tested on sharepoint 2013 but it will probably not work as it relies on specific markup.
        However, it could certainly be adapted with a few changes.

        Reply

    • jkennedy

      |

      Thanks for the post.
      1. I took your script and css and created a breadcrumb.txt..

      css

      js

      2. then stored it in Site Assets of the root level site.

      3. Then in my SP site at the root level, created a page with a Content Editor web part, in the Content Link I’m finding I have to use the FULL path to recognize the file.. /sites/tsodev/siteassets/breadcrumbs.txt (when using /siteassets/breadcrumbs.txt the file isn’t recognized)

      4. Loading the page and navigating the directories, no bread crumb displays.

      5. I’ve tried this with Subsites also and find I need to store the breadcrumbs.txt file in the subsite Site Assets library and use a link url of.. /sites/tsodev/subsitename/siteassets/breadcrumbs.txt

      6. and the subsite page does not display the bread crumb.

      Any ideas what I’m doing wrong?

      Reply

      • jkennedy

        |

        In step 1, the css is enclosed in style tags and js is enclosed in style tags

        Reply

        • Alexis Nominé

          |

          Try to paste the content directly in your content editor web part. It will not work if loaded from a txt file.

          like
          <script> [INSERT SCRIPT CONTENT] </script>
          <style> [INSERT STYLE CONTENT] </style>

          Reply

          • jkennedy

            |

            so on my page I added a Media and Content -> Content Editor web part to my page just above the document library.,

            then click the “Click here to add new content” and pasted in the

            as described,

            then when I save and view the page, the Content Editor displays the and markup that was pasted in followed by the document library.

            I took screen captures but can’t include them here.

            thanks

            Reply

    • SBranch

      |

      I have been attempting to implement the Breadcrumbs on SP 2010. After some debugging, it appears that regex.exec(windows.location.search) is coming up with a null value. When I checked the windows.location value it is only returning the high level aspx url generated by SharePoint.

      My basic setup is a SP 2010 page with Document Library web part and an HTML Form Web part. Any ideas what might be

      Reply

      • SBranch

        |

        After more testing, I determined the issue is that I have Compatibility View enabled for Intranet sites in IE11. Evidently, the document.querySelectorAll will not work in Compatibility View. Compatibility view must be running in a lower than acceptable mode.

        Reply

    Leave a comment