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="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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">
$("a.s4-breadcrumbRootNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbCurrentNode").clone().appendTo('div.wss-BreadCrumb');
$("<span>></span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbRootNode');
$("<span>></span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbNode');
$("span.s4-breadcrumbCurrentNode").clone().appendTo('div.wss-BreadCrumb');
</script>


3. Add styles to make it looks like WSS breadcrumb

div.wss-BreadCrumb
{
margin-bottom:5px;
display: inline-block;
}

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

div.wss-BreadCrumb span.s4-breadcrumbCurrentNode
{
margin-left:0px;
margin-right:0px;
}


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