How to: Add Simple Site Navigation

  • Article

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

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

  2. 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.

  3. Save your file and then close it.

To add site navigation to a Web page

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

  2. Open Training.aspx and add the following code.

    <%@ 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 xmlns="http://www.w3.org/1999/xhtml" >
<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 xmlns="http://www.w3.org/1999/xhtml" >
<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>

  3. 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.

See Also

Tasks

How to: Customize the Appearance of SiteMapPath Web Server Controls

Concepts

Customizing the Look and Feel of the TreeView Web Server Control

ASP.NET Site-Map Security Trimming

Securing ASP.NET Site Navigation

Securing Data Access

Reference

SiteMapPath

TreeView

Menu

Other Resources

ASP.NET Application Security in Hosted Environments