Software Development

Ease Web site navigation by implementing ASP.NET's SiteMapPath control


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.

Customizing individual nodes

The SiteMapPath control gives you more granular control of individual nodes with optional elements for customization. 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.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly .NET tips in your inbox TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

2 comments
blackhawx
blackhawx

I have a site that goes inorder from parent site to sub-sub-sub site... A B C D What would be the main cause of the breadcrumb, on the home page of Site D, to have a breadcrumb trail that looks like this... A C D Basically it completely leaves out B and I have no reason why. The URL for that page (D) is correct, but just not the breadcrumb. This is what I am using for a breadcumb setup in my custom page layout... ID="ContentMap" Runat="server" SiteMapProvider="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" Thanks for any suggestions!

Justin James
Justin James

Tony - Thanks for the article. Breadcrumbs are are great enhancement to many sites, but often ignored because they are a pain to maintain; tying to the site map makes it easier! While less than half of all users use breadcrumbs, that number is rising, those users do miss it when it is not present, and unlike many widgets it is unobtrusive and does not negatively impact users who ignore it. J.Ja