BreadCrumb In SharePoint 2010

Breadcrumb in SharePoint:

I want to develop a breadcrumb that should have to show up the below structure.

                    Root Node-->Parent Node-->Current Node.

Approach 1:

I tried the use the existing SharePoint introduced breadcrumb.

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

But it doesn’t satisfy my requirement because it shows up the below structure only.
 Parent Nodeà Current Node (missing Root Node).

           

Let me explain the actual functionality of it is:

In the above image, the “Root Site” is “Root Node” (means Top level Site collection). If you go the sub site of “Root Site” site the breadcrumb will display like below [As per the SharePoint given breadcrumb]

           

But here we should display the “Root Node” of it.  If you see the breadcrumb in the Sub site level it will not display the “Root Node” of it. What I mean to say here is without having the “Root Node” how can we find from where we are coming here. So, we should display the “Root Node” of it like below.

 The “Approach 1” is doesn’t satisfying my requirement. Go for the Approach 2.

Approach 2: 

I followed the “Erik Swenson” post.

http://erikswenson.blogspot.in/2010/11/convert-folder-breadcrumb-to.html

 

That post almost satisfied my requirement except the displaying structure. Because it will display a pop up menu with a hierarchy from the top of that site collection (See below figure).

Go to site ActionsàSite settings

      

So, the “Approach 2” is also not satisfying my requirement.

Why “Erik Swenson” post is not satisfying my requirement is:  He might be following SharePoint 2007 breadcrumb as it is.  

We should remind one thing here:

1. I.e. SharePoint 2007 has separate master pages for both application pages and site pages.
2. SharePoint 2007 Application pages referenced master page is: Application.master
   SharePoint 2007 Site pages referenced master page is: default.master
3. But there is no separate master page for both application and site pages in SharePoint 2010. Only referenced master page for all the pages are “V4.master”

The Erik Swenson post is not helped me if I navigate to application pages(it’s displaying like below image)

Note:  According to my knowledge, his post perfectly suitable if you have separate masterpages for both applications and site pages. Any way Thanks Eric for sharing good post.

 My approach:

 

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

     Just search for the “PlaceHolderSiteName” and replace the whole contentplaceholder with the
     below one:  That’s it.

<div id="container">    <div class="s4-titletext "> <asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">    <asp:SiteMapPath  runat="server"                 SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider"                 RenderCurrentNodeAsLink="true"                 NodeStyle-CssClass="breadcrumbNode"                 CurrentNodeStyle-CssClass="breadcrumbCurrentNode"                 RootNodeStyle-CssClass="breadcrumbRootNode"                 HideInteriorRootNodes="true"                 PathSeparator=""                 SkipLinkText="">                 <PathSeparatorTemplate>       <span style="position: relative;                width: 11px;                display: inline-block;                height: 11px;                overflow: hidden;">                <img style="position: absolute;                          border-right-width: 0px;                          border-top-width: 0px;                          border-bottom-width: 0px;                          border-left-width: 0px;                          top: -583px !important;                          left: 0px !important;" alt=":"                          src="/_layouts/images/fgimg.png" />         </span>     </PathSeparatorTemplate>   </asp:SiteMapPath>  </asp:ContentPlaceHolder>   <span id="Span1" class="s4-nothome s4-bcsep s4-titlesep">  <SharePoint:ClusteredDirectionalSeparatorArrow ID="ClusteredDirectionalSeparatorArrow1"              runat="server"/> </span>   <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" /> </div> </div>

The Css is:   #container {     padding-bottom: 10px;     padding-left: 15px;     padding-right: 15px;     padding-top: 10px; }

Please let me know for any issues.