The ASP.NET Site Map Web server control allows you to easily set up and define a Web application's logical structure. It is designed to work with ASP.NET 2.0's Menu, SiteMapPath, and TreeView navigation controls. This article describes how to implement user-friendly Web site navigation with the SiteMapPath control.
Breadcrumb
The ASP.NET 2.0 SiteMapPath control displays a navigation path, which allows users to understand their current location on a Web site. It essentially provides "You are here" functionality. This type of navigation element is often called a breadcrumb. The basic presentation shows the user the current page location and displays links as a path back to the home page.
This is the basic syntax for the SiteMapPath control:
<asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath>
By default, the SiteMapPath control displays the root node and other nodes that represent the current Web page. The SiteMapPath control also displays the pages in the site map between the root and the current node in the form of links displayed horizontally, with each link separated by the greater than symbol (>). The following sample shows a simple site map with the user on the third page of the structure.
Home Page > Page One > Page Two
You can control the presentation of the SiteMapPath control and individual links via the numerous available properties. The following list provides a subset of these properties:
|> PathSeparator: Allows you to use a different character for the separator as opposed to the default (>) character.
|> PathDirection: Allows you to display the path to the left or right; that is, starting with the current node and moving to the right from that point (RootToCurrent) or displaying the current node first with the path to the root flowing to the right (CurrentToRoot).
|> RenderCurrentNodeAsLink: Signals whether the current node is displayed as a link. This is a Boolean value.
|> PathLevelsDisplayed: Allows you to specify the number of levels of the structure to be displayed.
|> ShowToolTips: Signals whether tool tips are displayed when the mouse hovers over a link. The tool tips are defined in the description attribute for a node in the site map file. This is a Boolean value.
An interesting aspect of the SiteMapPath control is that it does not use the SiteMapDataSource control like the Menu and TreeView controls. The SiteMapPath control is tied to the site map file by default (i.e., it is placed in the application root).
Putting the SiteMapPath control to use
Since the SiteMapPath control offers a visual clue of your site location, you can easily place the control on a master page for you to use throughout the site. The following master page uses the control:
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TechRepublic Test</title>
</head>
<body>
<form id="frmMaster" runat="server">
<div>
<asp:SiteMapPath ID="smpMaster" runat="server"
PathSeparator=">>"
ParentLevelsDisplayed="1"
PathDirection="CurrentToRoot"
RenderCurrentNodeAsLink="false"
RootNodeStyle-ForeColor="orange"
ShowToolTips="true">
</asp:SiteMapPath>
<asp:contentplaceholder id="cpMaster" runat="server">
</asp:contentplaceholder>
</div></form></body></html>
This instance of the control overrides the default separator and displays links from left to right. In addition, the current node or page is not displayed as a link; the root node is presented in orange text, and tool tips are displayed for each link. Any page within the application will provide this breadcrumb -- as long as the page is included as a node within the application's site map file.
The SiteMapPath control will not display if the page is not defined as a node within the site map file. This is logical since the SiteMapPath control uses the site map file for navigation order and links displayed within the breadcrumb.
Customising individual nodes
The SiteMapPath control gives you more granular control of individual nodes with optional elements for customisation. Here is an overview of the available elements:
|> CurrentNodeStyle: Provides control of the presentation of the currently displayed node.
|> CurrentNodeTemplate: Allows you to define what is displayed and its style for the current node.
|> NodeStyle: Provides control of the presentation of all nodes.
|> NodeTemplate: Allows you to define what is displayed and its style for all nodes.
|> PathSeparatorStyle: Provides control of the presentation of the separator character.
|> PathSeparatorTemplate: Allows you to define what is displayed and its style for the separator character.
|> RootNodeStyle: Provides control of the presentation of the root node.
|> RootNodeTemplate: Allows you to define what is displayed and its style for the root node.
It's better to illustrate these elements with an example. The following master page uses an instance of the SiteMapPath control with custom display options defined for the root and current nodes.
CSS classes are used to style all nodes with specific classes for the root, current, and the remaining nodes. The CSS classes are assigned to the elements via their respective style elements. Square brackets are displayed around the current node -- defined in its template element. Parentheses are displayed around the root node as defined in its template. Notice that the Eval statement retrieves and displays data items from the data source (i.e., the site map file).
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TechRepublic.com Test</title>
<style type="text/css">
.rnode {font-family: times; font-size: 12pt; color: red;}
.cnode {font-family: courier; font-size: 14pt; color: green; font-weight: bold;}
.node {font-family: times; font-size: 12pt; color: black;}
</style></head><body>
<form id="frmMaster" runat="server">
<div>
<asp:SiteMapPath ID="SiteMapPath1" runat="server"
PathSeparator=">>"
PathDirection="rootToCurrent"
RenderCurrentNodeAsLink="false"
ShowToolTips="true"
RootNodeStyle-ForeColor="orange" >
<NodeStyle CssClass="node" />
<CurrentNodeStyle CssClass="cnode" />
<CurrentNodeTemplate>
[[<%# Eval("title") %>]]
</CurrentNodeTemplate>
<RootNodeStyle CssClass="rnode" />
<RootNodeTemplate>
((<%# Eval("title") %>))
</RootNodeTemplate>
</asp:SiteMapPath>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div></form></body></html>
Keeping track
A frustrating aspect of using large Web applications is remembering where you are within the site. Proper navigation controls address this issue by providing visual clues of user location and simple ways to get to other areas of the Web site. The ASP.NET SiteMapPath control allows you to easily provide a breadcrumb style navigation element so users know their location and how they got there.
Web site navigation is a major design issue for every Web application. We've all worked with Web applications with less than adequate navigation. Share your Web site navigation success and horror stories with the development community.
This was published in 
1
Kuldeep saini - 30/06/08
I think the code should be with example, thats makes easy to understand
» Report offensive content
2
oculy - 01/07/08
Yup that rightt code should be with example, thats makes easy to understand
» Report offensive content
3
Row - 19/02/09
Thanks for this. I have created a "TreeView Menu" in Visual Studio 2005 (VB Code) which is on a Master Page. I would now like to create SiteMap Path control on the Master Page which will link to the "TreeView" Menu. The SiteMap Path should then dislpay the page&path as the user selects the pages from the Tree Menu. Would you be ale to help?
Regards
R
» Report offensive content