How can I hide the SiteMapPath root node on home page?

Question

How can I hide the root node in a SiteMapPath control when the user is on the root node page? For example, my breadcrumb trail on a child page is:

Home > Products > Hammers > Ball Peen

which is fine. But when the user is on the Home page, the SiteMapPath control displays

Home

which is useless clutter. I want to suppress displaying Home (the root node) when the user is on the home page. I have the SiteMapPath control in a master page. Also, I'm handling SiteMapResolve to set the querystrings in the nodes.

Answer 1

One possible solution would be to simply hide the SiteMapPath control on the home page:

mySiteMapPath.Visible = (SiteMap.CurrentNode != SiteMap.RootNode);

Answer 2

I managed to figure this out but it took a while because the problem I was having was somewhat subtle. schou-rode has the right idea and that is what I was doing in Page_Load without success. The reason it wasn't working is because I was cloning the node in SiteMapResolve and returning the clone. This occurred before Page_Load so SiteMap.CurrentNode referenced the clone and the comparison to SiteMap.RootNode failed.

Here's the full solution:

protected void Page_Load(object sender, EventArgs e)
{
    SiteMapPath1.Visible = (SiteMap.CurrentNode != SiteMap.RootNode);
}

private SiteMapNode SiteMap_SiteMapResolve(object sender, SiteMapResolveEventArgs e)
{
    if (SiteMap.CurrentNode == null || SiteMap.CurrentNode == SiteMap.RootNode)
    {
        return SiteMap.CurrentNode;
    }
    // clone and set querystring in other nodes...
}

Answer 3

I've seen some code-based examples, but here's a cheep CSS solution (your target browsers must support css 2.1 though) that will hide the root node and the following path-separator.

Kill the Root node by setting the RootNodeTemplate to empty like so:

<asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="breadCrumbTrail">
   <RootNodeTemplate></RootNodeTemplate>
</asp:SiteMapPath>

That will make it render nothing for the Root node, but the Root's path-separator will still be displayed, so add these CSS selectors to your stylesheet (Important: notice I gave my SiteMapPath1 element a CssClass named 'breadCrumbTrail'):

.breadCrumbTrail
{
  font-size: small;
}

/*
First child element rendered by a SiteMapPath is an <a> tag you have no control over, 
adjacent to that is your root node's span tag, adjacent to that is the root node's 
path-separator span: don't display it.
*/
.breadCrumbTrail > a:first-child + span + span
{
  display: none;
}

Answer 4

<asp:SiteMapPath ID="contentNavigation" runat="server">
    <RootNodeTemplate>
    </RootNodeTemplate>
</asp:SiteMapPath>

and css code :

#ctl00_contentNavigation span:nth-child(2),span:nth-child(3)
{
    display:none;
}

Answer 5

The one of the right way to hide SiteMapPath root note in 3 easy steps:

• Reference MasterPage from ContentPage

  Example:

<%@ MasterType VirtualPath="~/Master.master" %>

• Make SiteMapPath as Protected Internal in designer class

  Example:

protected internal global::System.Web.UI.WebControls.SiteMapPath SiteMapPath1;

• Hide it from ContentPage

  Example:

Master.SiteMapPath1.Visible = (SiteMap.CurrentNode != SiteMap.RootNode);