Site Navigation in ASP.NET 2.0

As your web site grows in complexity, it is imperative that you make the effort
to make your site more navigable. A common technique employed by web sites
today uses a site map to display a breadcrumb navigational path on the page.

ASP.NET 2.0 comes with the SiteMapPath control to help you in site navigation. The SiteMapPath control is located in the Toolbox under the Navigation category (see Figure 1).

Figure 1. The SiteMapPath control

Building the Sample Application Using a Master Page

To illustrate the new controls available in ASP.NET 2.0 for site navigation, I will build a simple ASP.NET web application using a master page.

First, create a new web site using Visual Studio 2005 Beta 1. Create a new master page (right-click on project name in Solution Explorer and select Add New Item... Select Master Page) and name it "MasterPage.master." Populate the master page with the controls shown in Figure 2 (the actual controls used in this example are not critical to the understanding of this article).

Figure 2. Creating the master page

Add a new XML document to your project and name it Web.sitemap. Populate the file as follows:

The Web.sitemap file specifies the logical structure of the site. Hence, add the following new web pages to your project:

Default.aspx

CDBookShelves.aspx

NetworkCD.aspx

XMLCD.aspx

Cookbooks.aspx

Access.aspx

ASPNET.aspx

All of the above new web pages will inherit from the master page. To inherit from a master page, simple add in the MasterPageFile attribute in the Page directive of each page:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" %>

Using the SiteMapPath Control

ASP.NET 2.0 comes with the SiteMapPath control that allows you to display a breadcrumb navigational link on your site. In the master page, drag and drop the SiteMapPath control (located under the Navigation tab in the Toolbox) and place it under the red navigation bar (see Figure 3).

Figure 3. Adding the SiteMapPath control

The SiteMapPath control will automatically bind itself to the Web.sitemap file in your project. To make the control stand out, set its BackColor property to Yellow (#FFFF80).

Press F5 to run the project. When the pages are loaded, the SiteMapPath control will display the navigation paths (see Figure 4).

Figure 4. The SiteMapPath control in action

To jump to a page directly (say, the Cookbook.aspx page), click on the Cookbooks link.

Using the Menu Control

Besides the new SiteMapPath control, you can also use the new Menu control to display site path information. To see how the Menu control works, drag and drop the Menu control (located under the Navigation tab in Toolbox) and place it under the SiteMapPath control in the master page. In the SmartTag, click on Auto Format... and select the Colorful scheme. Next, select <New data source...> (see Figure 5).

Figure 5. Configuring the Menu control

Select Site Map as the data source and click OK. The Menu control is now bound to the Web.sitemap file and a new SiteMapDataSource control will be created (see Figure 6).

Figure 6. Selecting the data source for the SiteMapPath control

The Menu control supports two display modes: vertical and horizontal. To change the mode, set the Orientation attribute. Figure 7 shows the Menu control displayed in Vertical mode and Horizontal mode, respectively.