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
<siteMap> element. Nested within the
<siteMap> element is at least one
There must always be a top-level
<siteMapNode> within a site map. The Site Navigation feature requires a single root
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.
<siteMapNode> element usually contains a
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
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.
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.
NOTE: Both TreeView and Menu controls can be used for non-navigational scenarios.
- 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.
Here is a table highlighting some of the differences between TreeView and Menu to help you choose the right control for your particular scenario.
|Expansion||PopOut||Expand in place
|Download on Demand||No||Yes
|Layout||Horizontal & Vertical||Vertical
|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,
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