Breadcrumb for Office 365 (SharePoint Online)

One of the user-friendly + familiar navigation elements within SharePoint is the ‘breadcrumb’.   This has been removed from the standard SP2013 and O365 display – but is fairly easy to add back.

The simple tips, from some Googling, is to update the MasterPage – and remove the ‘display:none’ settings.

BUT – I don’t want to have make changes to my MASTER PAGE.

The other consideration is that people (users) don’t really need to jump back up the chain of breadcrumbs, but only need to “go up”.

ParentWeb via REST

My solution was to use some jQuery – and call the REST endpoint to get the parent web – and then poke in some HTML for this HREF.

image

Once you have jQuery in place (via JS Injection), then just refer to a JS file with the following code.    

Lastly, find a nice UP icon from an images search, or icon library, or use the one below – scroll to the bottom – and add a comment, while you’re there…    Smile

image

This handles the TOP site also – and doesn’t add the UP icon – as it’s already the top site.    And there is a hover text showing “back up to > xxxxxx” from the parent web title.

Thanks to this blogpost from Shantha Kumar T, for the REST + Parent Web idea…

Here’s the code – if you’d like to copy/paste – let me know if you find this useful !

$.ajax(

{

    url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/parentweb”,

    method: “GET”,

    headers: {“Accept”: “application/json; odata=verbose”},

    success: function(data)

    {

if (data.d.ServerRelativeUrl)

        {

            console.log(‘Parent site title: ‘ + data.d.Title)

var upSiteUrl = “”;

            upSiteUrl += “<span class=’upLink’>”

            upSiteUrl += “<a href='” + data.d.ServerRelativeUrl + “‘ title=’Back up to > ” + data.d.Title + “‘>”

            upSiteUrl += “<img src=’/sites/global/SiteAssets/IMG/up16.png’>”

            upSiteUrl += “</a>”

            upSiteUrl += “</span>”;

            $(‘#zz11_RootAspMenu’).before(upSiteUrl);

        }

    }

});

Icons – originally as a 128×128 – I resized to 16×16 – and changed the colour using PAINT.NET.

up16up