How to: Add Simple Site Navigation

ASP.NET

You can use the SiteMapPath, TreeView, or Menu controls to provide a consistent way for users to navigate your Web site.

The SiteMapPath control displays a navigation path, which is also known as a breadcrumb, or eyebrow, that shows the current page location and displays links as a path back to the home page.

Note:
If an .aspx page contains a SiteMapPath control, the .aspx page must be listed in the Web.sitemap file for the control to render.

On a Web page, the SiteMapPath control displays something like the following if the user is browsing the Training page:

Home > Services > Training

The TreeView control displays a tree structure that users can traverse for links to different pages in your site. A node that contains child nodes can be expanded or collapsed by clicking it. When it is first rendered, the TreeView control is fully expanded. On a Web page, the TreeView control displays something like the following:

- Home

- Services

Training

Consulting

The Menu control displays an expandable menu that users can traverse for links to different pages in your site. A node that contains child nodes is expanded when the cursor hovers over the menu item. For a code example that displays a site map in a Menu control, see How to: Display Site-Map Data in Non-Hierarchical Web Server Controls.

To use these site-navigation controls, you must describe the structure of your Web site in a Web.sitemap file.

To create a Web.sitemap file

Create a file in the root directory of your Web site called Web.sitemap.

Open the Web.sitemap file and add the following code.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home" >
    <siteMapNode title="Services" >
      <siteMapNode title="Training" url="~/Training.aspx"/>
      <siteMapNode title="Consulting" url=""/>
    </siteMapNode>
  </siteMapNode>
</siteMap>

Note:
Your Web application will fail if you list a URL that does not exist, or if you list a duplicate URL. The url attribute can start with the "~/" shortcut which indicates the application root. For more information, see ASP.NET Web Site Paths.

Later in this topic, you will create the Training.aspx page.

Save your file and then close it.

To add site navigation to a Web page

Create a file in the root directory of your Web site called Training.aspx.

Open Training.aspx and add the following code.

Visual Basic

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html  >
<head id="Head1" runat="server">
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>

  <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>


  <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />

  <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>

  <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>

  <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>

  </div>
  </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>

<html  >
<head runat="server">
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>

  <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>


  <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />

  <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>

  <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>

  <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>

  </div>
  </form>
</body>
</html>

Save and close the file, and then you can view your file in a browser to see how the controls display the navigation structure of your Web site.

Security

You can hide the links in your navigation structure from members of specific security roles. For more information, see ASP.NET Site-Map Security Trimming.

To create a Web.sitemap file

To add site navigation to a Web page

Tasks

Concepts

Reference

Other Resources