Add Breadcrumbs back into SharePoint 2013

SharePoint 2013’s master pages do not, by default, show breadcrumbs. SharePoint 2010 had reduced them to a fly-out menu (which was nice, as it used up less page space):
SP2010-Breadcrumb-Control

SharePoint 2013 doesn’t have them at all:
SP2013-Breadcrumb-Control-Missing

However, they can be restored…

First, edit the master page in SharePoint Designer or Design Manager. I’ve used Design Manager here, and I’ve found the section of the page about Breadcrumbs. You’ll notice that it’s hidden, and the breadcrumb control is hidden:
SP2013-Breadcrumb-Disabled

Delete the bit disabling the breadcrumb, and set the visibility of the control to ‘true’:
SP2013-Breadcrumb-Enabled

This still doesn’t entirely work for me (do check for yourself). On mine, there’s no ‘up’ icon shown:
SP2013-Breadcrumb-icon-missing

This is despite there being an image in the page, and an apparently valid URL to a valid image:

SP2013-Breadcrumb-icon-url

Leading to:
SP2013-Breadcrumb-icon-missing

This is because the URL to the image source is not valid. I’m not clear why, but the theme engine seems to insert an 8 letter hex value into the file name – and for the icon, it is wrong. Instead, let’s use JavaScript to correct this. Put this near the bottom of your file, making sure that the image’s URL is correct.

<script type="text/javascript">
document.getElementById("GlobalBreadCrumbNavPopout-anchor").innerHTML='<img style="border-width:0;position:absolute;left:-215px !important;top:-120px !important;" alt="Navigate Up" src="/_catalogs/theme/Themed/79206BD5/spcommon-B35BB0A9.themedpng">';
</script>

And you should now get an up-icon:

SP2013-Breadcrumb-Shown

You could, of course, use a different icon. It’s also worth noting that some work on the drop down menu itself may need a little work (each row is supposed to be indented from the one above).

Advertisements
Add Breadcrumbs back into SharePoint 2013

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s