<asp:SiteMapPath> Control

One of the great advantages of using an external site map—coded in the default web.sitemap file or in a special site map provider—is that the external file also can be the source of a breadcrumbs navigation trail. You probably have encountered these navigation trails on many sites. They list the trail of pages that you have navigated to reach the current page, and you can backtrack through the list by clicking on the listed links.

A breadcrumbs navigation trail is shown in the top row of following example. Select the path "Page 3 Page 3-2 Page 3-2-1" to view the full extent of the trail. Then click the breadcrumb links to backtrack through the pages of the menu hierarchy.

Figure 12-16. Site navigation menu with breadcrumbs trail.

Coding an <asp:SiteMapPath> Control

A trail of menu links is created by coding an <asp:SiteMapPath> control wherever on the page the breadcrumbs trail is to appear. By default, this control uses the site map contained in the web.sitemap file. The general format for a SiteMapPath control is shown in Figure 12-17.

<asp:SiteMapPath id="id" Runat="Server"
  ParentLevelsDisplayed="n"
  PathSeparator="string"
  RenderCurrentNodeAsLink="False|True"
  SiteMapProvider="provider"
    
    CurrentNodeStyle-property="value"...
    NodeStyle-property="value"...
    PathSeparatorStyle-property="value"...
/>
Figure 12-17. General format for <asp:SiteMapPath> control.

Normally, the full path to the current page is displayed in the breadcrumbs list. If preferred, the list can be shortened by giving the number of page links to display prior to the current page in the ParentLevelsDisplayed property. By default, the greater-than symbol ">" is displayed as the path separator character. A different character string can be specified in the PathSeparator property. By default, the current page reference in the list is not a clickable link, but can be effected as such with the RenderCurrentNodeAsLink="True" setting. Display styles can be set with CurrentNodeStyle, NodeStyle, and PathSeparatorStyle properties.

As noted, the SiteMapPath control references the site map contained in the web.sitemap file. If this provider has been changed to a different file, this fact needs to be indicated by specifying the provider name in the SiteMapProvider property (see the previous tutorial about site map providers).

Example SiteMapPath Code

The following code listing is for the previous example application. This code is for the master page containing Menu, SiteMapDataSource, and SiteMapPath controls. Both the SiteMapDataSource and SiteMapPath controls use a site map coded in the default web.sitemap file appearing in the root Web directory.

<%@ Master %>

<html>
<head Runat="Server">
  <title>Web Site</title>
</head>

<body>
<form Runat="Server">

<table border="1">
<tr>
  <td colspan="2">

    <asp:SiteMapPath id="SitePath" Runat="Server"
      PathSeparator=" &#8250; "
      PathSeparatorStyle-Font-Size="14pt"
      NodeStyle-Font-Name="Verdana"
      NodeStyle-Font-Size="8pt"
      NodeStyle-ForeColor="#990000"
      CurrentNodeStyle-Font-Underline="False"
      CurrentNodeStyle-Font-Bold="True"
      CurrentNodeStyle-ForeColor="#FF0000"/>

  </td>
</tr>
<tr>
  <td style="width:100px; vertical-align:top; background-color:#E0E0E0">

    <b>Menu</b><br/>

    <asp:SiteMapDataSource id="SiteMap"  Runat="Server"
      ShowStartingNode="False"/>

    <asp:Menu id="NavigationMenu" Runat="Server"
      DataSourceID="SiteMap"

      StaticDisplayLevels="1"
      StaticMenuItemStyle-VerticalPadding="2"
      StaticMenuItemStyle-Font-Name="Verdana"
      StaticMenuItemStyle-Font-Size="9pt"
      StaticMenuItemStyle-ForeColor="#990000"
      StaticHoverStyle-BackColor="#707070"
      StaticHoverStyle-ForeColor="#FFFFFF"

      DynamicMenuStyle-HorizontalPadding="5"
      DynamicMenuStyle-VerticalPadding="2"
      DynamicMenuStyle-BackColor="#E0E0E0"
      DynamicMenuStyle-ForeColor="#990000"
      DynamicMenuStyle-BorderWidth="1"
      DynamicMenuStyle-BorderColor="#C0C0C0"
      DynamicMenuItemStyle-VerticalPadding="2"
      DynamicMenuItemStyle-Font-Name="Verdana"
      DynamicMenuItemStyle-Font-Size="9pt"
      DynamicMenuItemStyle-ForeColor="#990000"
      DynamicHoverStyle-BackColor="#707070"
      DynamicHoverStyle-ForeColor="#FFFFFF"/>

  </td>
  <td style="vertical-align:top">
    <asp:ContentPlaceHolder id="CONTENT" Runat="Server"/>
  </td>
</tr>
</table>

</form>
</body>
</html>
Listing 12-17. Code to add a SiteMapPath to a page.