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

21 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

Unknown 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...

Unknown 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.

Erukulla's said...
This comment has been removed by the author.
Unknown said...

Please add following code in web.config if you getting issues using sitemap in code, it might be reading Machine.config setting in this case, which you need to override




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

Override the machine congig XmlSitemapprovide in web.config file

Unknown said...

simple to follow

Unknown said...

Hi,
I have a doubt
1)in footer page their is links for that i need to create the site map in asp.net core1.0 project.pls give me an idea and share the flow to create that

thanks in advance

Anonymous said...

Hi,
In this example the pages are in the same directory.
In my website there are multiple folders containing multiple pages.
Now at run time the server throws error like page not found.
What is the solution for this?
Thank you.

Unknown said...

thanks alot

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 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.