asp.net.ph

Skip Navigation Links

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.

To set the rendering for the SiteMapPath as a whole

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.

To customize link style properties

  1. Set the NodeStyle properties of the control:
    <asp:sitemappath id="siteMapPath" runat="server"
       nodestyle-font-names="verdana"
       nodestyle-forecolor="orange"
       nodestyle-borderwidth=2 />
  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.
  3. 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.

To customize a character that displays between links

  • 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.

To specify an image that displays between links

  • 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.

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

  • 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=" <-- " />

To limit the number of parent links displayed

  • 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" />

Accessibility

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.

To use the accessibility skip feature

© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note