Thursday, August 4, 2011

Breadcrumbs in SharePoint 2010

(That don’t require a click)

 

One of the biggest surprises I came across in moving to 2010 was the lack of breadcrumbs?!

I came across a few articles that explained/showed how you could enable v3 based controls to show – but these didn’t work on all pages.

Anyway, without spending hours of time testing – try this:

  1. Add reference to jquery (Master Page Edit, Control Delegate or inline content editor web part)
  2. Add the following Javascript (again – via a master page edit, control delegate or inline content editor web part)


$(document).ready(function () {
    $('table.s4-titletable > tbody > tr').append('<td id="crum"></td>');
    $('td#crum').html($('.s4-breadcrumb').html());
    $('td#crum li > span > span > img').first().css('top', '');
    $('td#crum span.s4-breadcrumbCurrentNode').css('font-weight', 'bold');
    $('td#crum span.s4-breadcrumbCurrentNode').css('color', 'gray');
    $('td#crum').css('white-space', 'nowrap');
    $('td#crum li').css('padding-right', '2px');
});

 

You should get a result similar to below:

(Yes, they are clickable / functional and completely dynamic)

image

No comments:

Post a Comment