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.

RenderCurrentNodeAsLink By 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.
PathDirection You 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

NodeStyle NodeTemplate All parts of the path except the root and current node.
CurrentNodeStyle CurrentNodeTemplate The node representing the current page.
RootNodeStyle RootNodeTemplate

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

PathSeparatorStyle PathSeparatorTemplate The 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>