Creating a Site Navigation Hierarchy->Using Site Navigation Controls

The Menu, TreeView, SiteMapPath and SiteMapDataSource controls generate navigation UI based on navigation data. This data can be stored in XML files, or it can be stored using the provider-based storage capabilities of the Site Navigation feature. The samples below demonstrate using the different controls in conjunction with the Site Navigation feature.

Creating an Application Site Map

The navigation structures for the Site Navigation QuickStart samples are represented in Web.sitemap files. In the sitemap file that you can view below, the navigational structure for the entire QuickStart is shown. A Web.sitemap file contains a single top-level <siteMap> element. Nested within the <siteMap> element is at least one <siteMapNode> element. There must always be a top-level <siteMapNode> within a site map. The Site Navigation feature requires a single root <siteMapNode> to ensure that walking up a hierarchy of nodes is guaranteed to eventually converge on a single well-known node. You can nest as many <siteMapNode> elements beneath the root <siteMapNode> element as needed. Additionally, you can nest <siteMapNode> elements to any arbitrary depth.

An individual <siteMapNode> element usually contains a Url, Title and Description attribute. The Url attribute can indicate a virtual path that corresponds to a page in your application. It can also contain paths to pages in other applications, or URLs that point at completely different web sites. In the sample below, all of the Url attributes use application-relative syntax to reference paths located within the QuickStart application. The Title attribute is used as display text when rendering UI for navigational data. For example, the SiteMapPath control uses the Title attribute to render the text of the hyperlinks in the control. If a Description attribute is present, server controls may use this information to display tooltips or ALT text. A developer can also add custom attributes to a <siteMapNode> and these attributes will be available using the default indexer on the SiteMapNode class. For information on other attributes supported on the <siteMapNode> element please see the .NET Framework documentation.

Web.sitemap Example

Using the Site Navigation Controls

An easy way to provide site navigation on your web page is to use one of the site graphical site navigation controls: SiteMapPath, TreeView and Menu.

• SiteMapPath - A breadcrumb control that retrieves the user current page and displays the hierarchy of pages. This enables the users to navigate back to other pages in the hierarchy. SiteMapPath works exclusively with the SiteMapProvider which can be set via the SiteMapProvider property on the control.
  
  
• TreeView - Provides the vertical user interface to expand and collapse selected nodes on a web page as well as providing check box functionality for selected items. The TreeView control supports declarative and programmatic settings of data elements and data source controls. If you use the SiteMapDataSource control, databinding will be automatic.
  
  
• Menu - Provides a horizontal or vertical user interface that pops-out additional sub-menu's when a user hovers over an item. . The Menu control supports declarative and programmatic settings of data elements and data source controls. If you use the SiteMapDataSource control, databinding will be automatic.

NOTE: Both TreeView and Menu controls can be used for non-navigational scenarios.

Here is a table highlighting some of the differences between TreeView and Menu to help you choose the right control for your particular scenario.

Feature	Menu	TreeView
Expansion	PopOut	Expand in place
Download on Demand	No	Yes
Checkboxes	No	Yes
Templates	Yes	No
Layout	Horizontal & Vertical	Vertical
Style Options	Yes	Yes
Selection Model	Static, Dynamic Level	Level or Parent/Root/Leaf, or by data item

In this sample you see TreeView and Menu controls with various style properties configured for different areas and actions (for example, NodeStyle and HoverNodeStyle). The TreeView and Menu controls are both connected to the same SiteMapDataSource control on the page. The SiteMapPath control is accessing the same data via the default SiteMapProvider which is set in the Web.config file.

VB Navigation Controls