Home » ASP.NET Basics » 05 - Site Navigation
5

Adding SiteMapPath control

Explains what sitemap path controls are and how to create them

ASP.NET 2.0 provides one more control for site navigation - the SiteMapPath control. Though it is not as convenient as the Menu or TreeView controls, many sites use this type of navigation as `breadcrumb' navigation. We have seen pages with a navigation system at the top or the bottom of the page with the format like - Home > Search > Books - this is known as "breadcrumb", a path showing where we are. The SiteMapPath control is used to create such a navigation system.

We need a site map file for this control. Since we already have one, we are going to use it now. But first, we need to select a location where this control will be placed. An ideal location is just below the banner cell, above the content page.

Click inside the banner cell. From the Layout menu, select option - Insert > Row Below. A new row will be added below the banner and logo row.

In the new row, we are interested in the left cell (just below the banner cell). We will put the SiteMapPath control in this cell so that it appears above the content pages.

Click inside this cell. From the `Layout' menu, select option - `Select > Cell'. This will select the cell for formatting. We just want to change the background color of the cell.

Keeping the cell selected, from the `Format' menu, select `Style...' option. In the `Style Builder' dialog box that appears, click on the `Background' tab and select a background color for the cell (refer to chapter 3 for Style Builder dialog box).

Now is the time to add the SiteMapPath control. Drag the control from the Tool Box (It is in the `Navigation' section) and drop it in the cell. The smart tag for the control will open up. We can click the Auto Format option to give a style to the control.

Clicking on the Auto Format option displays a dialog box. We can select a formatting style for the control here.

Save the project and run it. The browser displays our site with the `Breadcrumb' (SiteMapPath control) navigation.

Right now, our site does not have many levels of pages so the use of the SiteMapPath control looks unnecessary. However, if we add more levels of pages in future (for example, the download section can have sub categories for different types of downloads), the control will include them, provided we add them in our site map file. We will create such pages in a later chapter.

In this chapter, we worked with different navigation controls. ASP.NET 2.0 makes it very easy to add a navigation system to our site. All we need to do is to create the XML site map file, add a SiteMapDataSource control and then use the navigation controls like Menu and TreeView.

In the next chapter, we will learn about some commonly used controls of ASP.NET 2.0.