Customizing the SiteMapPath User Interface

Controls You Can Use on Web Forms ASP.NET Navigation Controls SiteMapPath Control

The SiteMapPath exposes several properties for customizing the visual rendering of the control. These properties are applied in the order listed below:

properties that apply to the SiteMapPath control as a whole
properties that apply to specific node types
properties that apply to individual nodes

The procedures in this topic assume that you have already created a site map and a page that contains a SiteMapPath control.

A quick way to alter the appearance of the SiteMapPath is to specify the style attributes or templates to use for the control.

The following table lists the available styles you can specify for the SiteMapPath.

SiteMapPath Style Property	Description
NodeStyle	The style settings for all the nodes in a SiteMapPath.
RootNodeStyle	The style settings for the root node in a SiteMapPath.
CurrentNodeStyle	The style settings for the current node in a SiteMapPath.
PathSeparatorStyle	The style settings for the path separator in a SiteMapPath.

Set the NodeStyle properties of the control:

<asp:sitemappath id="siteMapPath" runat="server"
   nodestyle-font-names="verdana"
   nodestyle-forecolor="orange"
   nodestyle-borderwidth=2 />

If you want the style of each link to be different, repeat the previous step with the RootNodeStyle and CurrentNodeStyle properties of the SiteMapPath control.
If you want the style of the path separator to be different, repeat the previous step with the PathSeparatorStyle property of the SiteMapPath control.

Most of the properties described in the Style and FontInfo classes are available, including the CssClass property.

NOTE: To improve performance, you can use templates to customize the style of all the node elements at once.

The following table lists the template types you can specify for the SiteMapPath.

Template Property	Description
NodeTemplate	The template that contains the custom content to render for all nodes in a SiteMapPath.
RootNodeTemplate	The template that contains the custom content to render for the root node in a SiteMapPath.
CurrentNodeTemplate	The template that contains the custom content to render for the current node in a SiteMapPath.
PathSeparatorTemplate	The template that contains the custom content to render for the path separator in a SiteMapPath.

In an ASP.NET Web page that contains a SiteMapPath control, add the PathSeparator property to the control.
```
<asp:sitemappath id="siteMapPath" runat="server"
   pathseparator=" :: " />
```
The SiteMapPath control will display something like the following:

Home :: Services :: Training

You can use any string to separate the links, however to use an image, follow the next procedure.

In an ASP.NET Web page that contains a SiteMapPath control, add the following lines of code to the control:

<pathseparatortemplate>
   <asp:image id="image1" runat="server"
      width="20"
      imageurl="images/pathseparatorimage.jpg" />
</pathseparatortemplate>

In addition, you can apply the following customization to a SiteMapPath control:

Reverse the direction of the navigation path.
Specify the number of parent links that are displayed.

In an ASP.NET Web page that contains a SiteMapPath control, add the PathDirection and PathSeparator to the control.

<asp:sitemappath id="siteMapPath" runat="server"
   pathdirection="currenttoroot"
   pathseparator=" <-- " />

In an ASP.NET Web page that contains a SiteMapPath control, add the ParentLevelsDisplayed property to the control.
```
<asp:sitemappath id="siteMapPath" runat="server"
   parentlevelsdisplayed="2" />
```

Site-navigation controls are typically used on every page in a Web site. Screen readers and other assistive devices read aloud the text in a navigation control during every visit to a page and on every postback.

The SiteMapPath, SiteMapPath, and SiteMapPath site-navigation controls each include a property called SkipLinkText that allows repeated information to be skipped on subsequent pages or views of the same page.

In an ASP.NET Web page that contains a navigation control, add the following property to the control:
```
<asp:sitemappath id="siteMapPath" runat="server"
   skiplinktext="skip breadcrumb" />
```
See Also

Introduction to the SiteMapPath Control Adding SiteMapPath Controls to a Web Forms Page

Home Getting Started Web Forms Web Applications ADO.NET ASP/ADO Back to Basics

Customizing the SiteMapPath User Interface

To set the rendering for the SiteMapPath as a whole

To customize link style properties

To customize a character that displays between links

To specify an image that displays between links

To reverse the direction of the path displayed by the SiteMapPath control

To limit the number of parent links displayed

Accessibility

To use the accessibility skip feature

See Also