Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.net SiteMapPath Navigation Control Example | BreadCrumb Example in Asp.Net

Sep 24, 2012
Introduction:

In this article I will explain how to use sitemappath navigation control or create breadcrumb for web application with example in asp.net.

Description:

In previous post I explained how to pass table as parameter to stored procedure, Add Fade in effect to webpage using JQuery and many articles relating to asp.net, JQuery, Ajax etc. Now I will explain how to use sitemap navigation control or how to implement breadcrumb in asp.net.

Sitemap navigation is a control which allows users to know the current page location with respect to home page. To implement this concept

First create one new web application >> Right click on application and select Add New Item >> Select Web Form >> Give name as Careers.aspx >> Click OK

Similar way you can add two more pages and give names as Jobs.aspx and ContactUs.aspx page

Once pages added to website >> Right click on website and select Add New Item >> Select SiteMap >> Click OK

Once SiteMAP added to website open SiteMAP and write the following code


<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Default.aspx" title="Home"  description="Home Page">
<siteMapNode url="Careers.aspx" title="Careers"  description="Careers Page" >
<siteMapNode url="Jobs.aspx" title="Jobs"  description="Jobs Page" />
</siteMapNode>
<siteMapNode url="ContactUs.aspx" title="Contact"  description="ContacUs Page" />
</siteMapNode>
</siteMap>
If you observe above sitemap I added Career.aspx page and ContactUs.aspx pages under Default.aspx page and I added Jobs.aspx under Career.aspx page.

Now if we open Jobs.aspx page we will get sitemap like this

Home >> Careers >> Jobs

For example if we open ContactUs.aspx page we will get sitemap like this

Home >> Contact

Now write the following code in all aspx pages (Default.aspx, Career.aspx, Jobs.aspx and ContactUs.aspx)


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Site Navigation or BreadCrumb Example in asp.net</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:SiteMapPath ID="SiteMap1" runat="server"></asp:SiteMapPath>
</div>
</form>
</body>
</html>
After completion of add above code in all pages open Jobs.aspx and run you will find site navigation like this


If you open ContactUs.aspx page you will find site navigation output like this


Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

13 comments :

Ajay said...
This comment has been removed by the author.
Ajay said...
This comment has been removed by the author.
Ajay said...

Nice one!!!
+
To stop showing the root node add this in sitemappath --> ShowStartingNode="False"

Anonymous said...

easy way learning of the asp.net

Anonymous said...

Hi,

Great article.

Thanx..

But how to implement category ,sub category in e-commerce application

Anonymous said...

Is it possible to create a horizontal menu using the below sitemap file? The menu should display.....
home menu1 menu2 menu3 menu4>menusub1 etc.......










































The problem with the current sitemap is that everything is under the top "Home" node. and i also set orientation=horizontal but still not getting.....i know this problem is nothing but annoying me....please help

Anonymous said...

Is it possible to create a horizontal menu using the below sitemap file? The menu should display.....
home menu1 menu2 menu3 menu4>menusub1 etc.......

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








































The problem with the current sitemap is that everything is under the top "Home" node. and i also set orientation=horizontal but still not getting.....i know this problem is nothing but annoying me....please help

Anonymous said...

Is it possible to create a horizontal menu using the below sitemap file? The menu should display.....
home menu1 menu2 menu3 menu4>menusub1 etc....


The problem with the current sitemap is that everything is under the top "Home" node. and i also set orientation=horizontal but still not getting.....i know this problem is nothing but annoying me....please help

Anonymous said...

thanks

Anonymous said...

grt work dude
and thanxs 4 ur articles it solved my work and ca i ask u questions about programmes of .net and can u solve and give it to my mail id plz

Anonymous said...

Hi,
i want asp.net(C#) breadcrumbs code in visualstudio2008 without addiong sitemap...can anyone help in this issue asap...
thnaks in advance

Vanitha Yoganand said...

Hi,

I created a web forms application in visual studio 2013.
Added a webform Test.aspx under the root.
Added sitemap and datasource.





Added sitemap as follows







when I browse Test.aspx breadcrumb is not displayed. Whats the problem? Kindly help me...

Vanitha Yoganand said...

Hi,

I just found that in the .Net 3.5 web app created using vs 2008 it works but not in .net framework 4.5 web app created using vs 2013.

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.