Home » Articles


Sponsored links

CodeDigest Navigation

Technology News
No News Feeds available at this time.

Community News
No News Feeds available at this time.
Navigation controls in ASP.Net 2.0

By Satheesh babu
Posted On Feb 24,2008
Article Rating:
Be first to rate
this article.
No of Comments: 0
Print this article.

Navigation controls in ASP.Net 2.0

When our site grows drastically, it will be very hard to provide a better navigation facility. ASP.Net 1.x does not have any controls to support this very easily. With the introduction of ASP.Net 2.0, we have a set of new Navigation controls which provides easy navigation facility for our site. Visual Studio 2005 comes with a separate tab for Navigation controls called Navigation.





This controls will enable us to provide easy navigation features like Sitemap, bread crumbs for our site with a minimal effort. This article gives you an overview and usage of Navigation controls in ASP.Net 2.0.


SiteMap with Navigation Control:

A sitemap is nothing but displaying the whole structure of our website for easy navigation. Below you can find the sitemap of eBay site.





Similarly to provide a Sitemap in a better and interactive way, we first need to create a XML file that has information about the hierarchy of web pages called sitemap file.



1) Right click your solution and click add new item.

2) Select Sitemap file and click Add.



We should specify the navigation hierarchy of our WebPages in XML format in this file. For example, take a site that has a page structure like,




                     - Apparels.aspx

                     - Cosmetics.aspx

                     - Hardware.aspx

                     - software.aspx


                    - Computers.aspx

                    - Sciencefiction.aspx

                    - Space.aspx


The SiteMap XML data for this hierarchy will be,

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="" >

  <siteMapNode url="Default.aspx" title="Home"  description="Home">

    <siteMapNode url="Products.aspx" title="Products"  description="Products Sale">

        <siteMapNode url="Apparels.aspx" title="Apparels"  description="Dress" />

        <siteMapNode url="Cosmetics.aspx" title="Cosmetics"  description="Cosmetics" />

       <siteMapNode url="Hardware.aspx" title="Hardware"  description="Hardware" />

       <siteMapNode url="Software.aspx" title="Software"  description="Software" />


    <siteMapNode url="Books.aspx" title="Libraries"  description="Libraries">

      <siteMapNode url="Computers.aspx" title="Computers"  description="Computers" />

      <siteMapNode url="Sciencefiction.aspx" title="Sciencefiction"  description="Sciencefiction" />

      <siteMapNode url="Space.aspx" title="Space"  description="Space" />     





To display the sitemap we can use either Tree view control or Menu control in ASP.Net 2.0.


Using TreeView:


1) Drag a treeview control into the form.

2) To bind the XML SiteMap file to treeview we can use “SiteMapDatasource” which is in “Data” tab of Visual Studio. Drag it to the webform.





3) Sitemap data source control will automatically detect the Sitemap file in the project and it will read the file without any configuration settings. We can set the start page of the SiteMap here by setting the page for “StartNodeUrl”.

<asp:SiteMapDataSource ID="smDS" runat="server" StartingNodeUrl="~/Default.aspx" />

4) Set the DataSourceID property of Treeview to SiteMapDatasource ID.


<asp:TreeView ID="TreeView1" runat="server" DataSourceID="smDS">


5) Run the Application. The output will be like,



Using Menu:

Drag a menu control and set its DataSourceID similar to what we did for TreeView Control.


<asp:Menu ID="mnSite" runat="server" DataSourceID="smDS">


The output will be like..



Bread Crumbs:

It is very easy to provide a bread crumb feature in ASP.Net 2.0.Just a drag a “SiteMaPPath” from Navigation tab to our web page. It needs no configuration to work.


<asp:SiteMapPath id="smSite" BackColor="SkyBlue" CurrentNodeStyle-Font-Bold="true" ForeColor="White" runat="server">




The output will be like,


Download Source:

Download source
Similar Articles
You can contribute to CodeDiget.Com:
Donate to
Article Feedback