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):

SharePoint 2013 doesn’t have them at all:

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:

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

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

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


Leading to:

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">';

And you should now get an up-icon:


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).

Add Breadcrumbs back into SharePoint 2013

Leave a Reply

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

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

Facebook photo

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

Connecting to %s

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