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

Advertisements

One thought on “Breadcrumb for Office 365 (SharePoint Online)

  1. NOTE – this is a little “random” in Internet Explorer as the “ID” of the top nav changes – WTF !!?
    Better to use a class selector – as shown here >>
    $(‘.ms-core-listMenu-horizontalBox’).before(upSiteUrl);

    Everything else is the same – just the LAST line…

    Like

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