Breadcrumb in Sharepoint 2010

<%-- ASP Version: Breadcrumb and Page description --%>

                        <div class="s4-titletext s4-notdlg">

                           <h1 name="onetidProjectPropertyTitle">

                                        <asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">

                                                <SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle"><SharePoint:ProjectProperty Property="Title" runat="server" /></SharePoint:SPLinkButton>

                                        </asp:ContentPlaceHolder>

                                </h1>

                                <span id="onetidPageTitleSeparator" class="s4-nothome s4-bcsep s4-titlesep">

                                <SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/> </span>

                                <h2>

                                        <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />

                                </h2>

                                <div class="s4-pagedescription" tabindex="0" >

                                        <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>

                                </div>

                          </div>

                          <%-- End breadcrumb and Page description --%>

 

<%-- JQuery Version: Breadcrumb --%>

               

div class="wss-BreadCrumb s4-notdlg"></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>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbRootNode');

$("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbNode');

$('div.wss-BreadCrumb').append($("title").html());

$('.wss-BreadCrumb a').each(function(){

        if ($(this).html()=="Pages") {

                $(this).hide();

                $(this).next().hide();

        }

        });

 

 

</script>

<style type="text/css">

div.wss-BreadCrumb

{

margin-bottom:5px;

display: inline-block;

font-size:11px;

font-weight:bold;

}

 

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: #818181; font-weight:normal;

}

div.wss-BreadCrumb a.s4-breadcrumbNode:hover, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode:hover,

div.wss-BreadCrumb a.s4-breadcrumbRootNode:hover {text-decoration:underline; }

 

 

</style>

        <%-- end breadcrumb --%>