Friday, January 7, 2011

WSS-like breadcrumb in SharePoint 2010

This was the first user's request after migration had been done. It wasn't very important. Just annoying. I played some time with site navigation and ended up with jQuery. There is a kind of WSS-like breadcrumb on SharePoint 2010 master page but now it is a pop-up. The idea is to put it to page in usual way.

1. Add reference to jQuery into your master page, e.g.

<script type="text/javascript" src=""></script>

just before tag </head>

2. Add breadcrumb holder div and jQuery next to it where you want to see it

<div class="wss-BreadCrumb"></div>
<script type="text/javascript">
$("<span>></span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbRootNode');
$("<span>></span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbNode');

3. Add styles to make it looks like WSS breadcrumb

display: inline-block;

div.wss-BreadCrumb span
margin-right: 5px;

div.wss-BreadCrumb span.s4-breadcrumbCurrentNode

div.wss-BreadCrumb a.s4-breadcrumbNode, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode,
div.wss-BreadCrumb a.s4-breadcrumbRootNode
color: blue;

No comments:

Post a Comment