|Important||This document may not represent best practices for current development, links to downloads and other resources may no longer be valid. Current recommended version can be found here.|
How to: Add Simple Site Navigation
You can use the, , or 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.
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:
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.
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> </siteMapNode> </siteMap>
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.
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.
<%@ 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>
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.
You can hide the links in your navigation structure from members of specific security roles. For more information, see.