How to: Customize the Appearance of SiteMapPath Web Server Controls

The visual appearance of site-navigation controls can be customized by setting the attributes of the control, or by configuring the templates that are available for the control. Templates and styles are applied to links according to two rules of precedence that are described in the Remarks section of SiteMapPath.

Alternatively, you can apply a theme or control skin to a control, or you can develop custom site-navigation controls that meet your rendering needs. For more information about applying themes to Web controls, see How to: Customize the ASP.NET CreateUserWizard Control.

The SiteMapPath control displays a navigation path, which is also known as a breadcrumb or eyebrow, that displays links as a path from the current page back to the home page of the Web site. On an ASP.NET page, the SiteMapPath control displays something like the following:

Home > Services > Training

The TreeView and Menu controls also render site-map data, and they, similar to the SiteMapPath control, can be customized like most other Web controls. This topic describes how to use the following customization features of the SiteMapPath Web server control:

• Specify characters or images that display between the links.

• Reverse the direction of the navigation path.

• Specify the number of parent links that are displayed.

The procedures in this topic assume that you have already created a site map and a page that contains a SiteMapPath control. You can use the example Web.sitemap file in ASP.NET Site Maps.

To customize link style properties

1. In an ASP.NET Web page that contains a SiteMapPath control, add the following properties to the control:

   RootNodeStyle-Font-Names="Verdana"
   RootNodeStyle-ForeColor="Orange"
   RootNodeStyle-BorderWidth=2
   

   For example, the code for the SiteMapPath control might look like the following:

   <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
     SkipLinkText="Skip Menu"
     RootNodeStyle-Font-Names="Verdana"
     RootNodeStyle-ForeColor="Orange"
     RootNodeStyle-BorderWidth=2 >
   </asp:SiteMapPath>
   

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

2. If you want the style of each link to be different, repeat the previous step with the ParentNodeStyle, CurrentNodeStyle, and PathSeperatorStyle properties of the SiteMapPath control.

   Note
   To improve performance, you can use the NodeTemplate to customize the style of all the links at once. For more information, see ASP.NET Web Server Controls Templates.

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.

  For example, the code for the SiteMapPath control might look like the following:

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
    PathSeparator=" :: ">
  </asp:SiteMapPath>
  

  Your 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>
  </PathSeparatorTemplate>
  

  For example, the code for the SiteMapPath control might look like the following:

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server" >
    <PathSeparatorTemplate>
      <asp:Image ID="Image1" Runat="Server" 
        Width="20" 
        ImageUrl="Images/PathSeparatorImage.jpg" />
      </PathSeparatorTemplate>
    </PathSeparatorTemplate>
  </asp:SiteMapPath>
  

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.

  For example, the code for the SiteMapPath control might look like the following:

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
    PathDirection="CurrentToRoot"
    PathSeparator=" <-- " >
  </asp:SiteMapPath>
  

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.

  For example, the code for a SiteMapPath control that will display a maximum of two parent links might look like the following:

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
    ParentLevelsDisplayed="2" >
  </asp:SiteMapPath>
  

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, TreeView, and Menu 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

• In an ASP.NET Web page that contains a navigation control, add the following property to the control:

  SkipLinkText="Skipped Menu"
  

  For example, the code for a SiteMapPath control might look like the following:

  <asp:SiteMapPath ID="SiteMapPath1" 
    Runat="server" 
    SkipLinkText="Skip Breadcrumb">
  </asp:SiteMapPath>
  

See Also

Tasks

How to: Customize the ASP.NET CreateUserWizard Control

Concepts

ASP.NET Site Navigation Overview
ASP.NET Web Server Controls Templates
SiteMapPath Web Server Control Overview
Customizing the Look and Feel of the TreeView Web Server Control
Securing ASP.NET Site Navigation
Securing Data Access

Other Resources

ASP.NET Application Security in Hosted Environments