Sharepoint 2010 Change name of node in breadcrumb

Question

I have a project in Sharepoint 2010 environment. I have page layouts dynamically displaying breadcrumbs via the following:

<div class="BreadCrumbWrap breadcrumb s4-notdlg">
                            <asp:SiteMapPath runat="server" SiteMapProvider="SPContentMapProvider" id="ContentMap"   CssClass="BreadCrumbStyle" PathSeparator="&#47;">
                            <CurrentNodeStyle CssClass="BreadCurrentNode" />
                            <PathSeparatorStyle CssClass="BreadPathSeparator" />  
                            </asp:SiteMapPath>
                </div><!--breadcrumbs-->

Currently the breadcrumbs are pulling in the site name for the home node. I want the first node to have 'Home' for the text instead. Is there a way through javascript to replace the text with the text I want?

Answer 1

If jQuery is an option for you then use it. You will need to construct the selector to get to the Home node and replace it with whatever text you need. For example,

Let's assume you have the following HTML for the breadcrumb:

<ul class="breadCrumb">
<li class="breadCrumbNode"><a title="Home" href="">Home</a></li>
<li class="breadCrumbNode"><span class="breadCrumbArrow">&nbsp;&gt;&nbsp;</span></li>
<li class="breadCrumbNode"><a title="Page1" href="">Page1</a></li>
<li class="breadCrumbNode"><span class="breadCrumbArrow">&nbsp;&gt;&nbsp;</span></li>
<li class="breadCrumbNode"><span class="breadCrumbCurrentNode">This Page</span></li>

Your JavaScript would be:

$(document).ready(function (){
$('.breadCrumbNode>a[title=Home]').text('New Title for Home Page');

});