How to customize the SiteMapPath navigation control in ASP.NET

The SiteMapPath control, described in the article: How to use the SiteMapPath navigation control in ASP.NET, is also fully customizable. The next table lists some of its most frequently configured properties:

 

Property

Description

ShowToolTips

If you don’t want the description text to appear when the user hovers over a part of the site map path you should set this property to false.

ParentLevelsDisplayed

By default, this property is -1, which means all levels will be shown. You can use it to set the maximum number of parent levels that will be shown at once.

RenderCurrentNodeAsLinkBy default this Boolean type property is false because the user is already at the current page.  If you set to true, the portion of the page that indicates the current page is turned into a clickable link.
PathDirectionYou can set to two possible values: 

– RootToCurrent (default).

– CurrentToRoot (which reverses the order of levels in the path).

PathSeparator

You can use it to specify the characters that will be placed between each level in the path. The default is the greater-than (>) symbol. Another common path separator is the colon (:).

 

You can configure the SiteMapPath control with styles and the next table lists possible styles and templates:

 

Style

Template

Applies to

NodeStyleNodeTemplateAll parts of the path except the root and current node.
CurrentNodeStyleCurrentNodeTemplateThe node representing the current page.
RootNodeStyleRootNodeTemplate

The node representing the root. If the root node is the same as the current node, the current node template or styles are used.

PathSeparatorStylePathSeparatorTemplateThe separator between each node.

 

The next example shows the case when SiteMapPath uses an arrow image as a separator and a fixed string of the bold text for the root node. The final part of the path, which represents the current page, is italicized:

<asp:SiteMapPath ID=”SiteMapPath1″ runat=”server”>

<PathSeparatorTemplate>

<asp:Image ID=”Image1″ ImageUrl=”./images/arrow.jpg” runat=”server” GenerateEmptyAlternateText=”True” />

</PathSeparatorTemplate>

 

<RootNodeTemplate>

<b>Root</b>

</RootNodeTemplate>

 

<CurrentNodeTemplate>

<i><asp:Label ID=”Label1″ runat=”server” Text='<%# Eval(“title”) %>’> </asp:Label></i>

</CurrentNodeTemplate>

</asp:SiteMapPath>