While doing development on a Sharepoint 2013 enterprise page, I noticed that the theme did not have the breadcrumb option by default on document library pages or list views. While it did have this option on regular pages, it was missing from lists and document libraries. While looking for a custom solution, I came across a few different options, but none seemed to work correctly and the options seemed difficult to install.
The first step is to add jQuery to your master page. It will need to be stored in your master page library. Sharepoint handles adding scripts a little differently than your typical Content Management System. You’ll need to link it using the following code:
The “navigate up” snippet also should be added to your master page. The code looks like this:
In order to do so, I use jQuery to first look for the “Navigate Up” breadcrumb code. This code can be located by using the “ul.ms-breadcrumb” selector. This selector will always be present whenever your on sub pages or libraries. The “Navigate Up” breadcrumbs will have this class added to the ul item. This is how we’re able to determine whether a breadcrumb exists on a page and whether we’re on a top level page. If we’re on a top level page, we don’t need the breadcrumbs.
That’s it for the jQuery. Very simple and easy to see what is going on. The next step will be to style the cloned Breadcrumb class so that the ul elements aren’t out of line. Remember, we’re using the “Navigate Up” dropdown breadcrumb style. So now we need to “restyle” it to look like normal breadcrumbs.
To do so we’ll add some custom css. Keep in mind, you may need to tweak these settings, but for the default “Seattle” theme, this is what worked for me. We built our theme by customizing the Seattle theme. You can place this in your main css file, or you can leave it in the master page inline.
That’s it, you should now have a customized looking breadcrumb using simple jQuery and css.