Tutorials and Code

ActionScript (5)
ASP (7)
ASP.NET (28)
Assembly (1)
C (6)
C# (132)
C++ (33)
CSS (6)
General (4)
HTML (6)
Java (28)
JavaScript (38)
MySQL (2)
Objective C (1)
Pascal (1)
PHP (61)
Python (3)
Ruby (18)
Silverlight (1)
SQL (7)
VB.NET (5)
Visual Basic (3)

Syndication

My Account

Community Forums

Webmaster Tools

Tech Jobs

Geekpedia » ASP.NET Tutorials » Site Map and Bread Crumbs for your website

Site Map and Bread Crumbs for your website

Using ASP.NET 2.0 it is very easy to create a site map of your website. One of the things you can do with a site map is build a bread crumb navigation style, which we will cover in this tutorial.

On Wednesday, August 17th 2005 at 03:51 PM

By Andrew Pociu (View Profile)

(Rated 3.6 with 25 votes)

Contextual Ads

More ASP.NET Resources

Download the project

In a newly created ASP.NET website project, add two ASP.NET web forms: Contact.aspx and Tutorials.aspx. Along with the Default.aspx web form created by default, we now have three files. Now that we built an website composed of 3 files, let's define its structure so that the site map can be built.

Right click the project and choose Add New Item. Select Site Map as seen in the screenshot below:

We can have multiple Site Maps for our website, but this will be the default one.

After adding Web.sitemap to the file, you can see it contains the following:

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

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

   <siteMapNode url="" title="" description="">

      <siteMapNode url="" title="" description="" />

      <siteMapNode url="" title="" description="" />

   </siteMapNode>

</siteMap>

Here we'll define our site map, we want to mention the 3 files we have in the project. The Default.aspx will be the root, and the other two files, Tutorials.aspx and Contact.aspx will be situated under Default.aspx (child pages). Here's how we need to set up the Web.sitemap file:

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

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

   <siteMapNode url="Default.aspx" title="Geekpedia Home" description="Geekpedia.com home page">

      <siteMapNode url="Tutorials.aspx" title="Programming Tutorials" description="Programming tutorials on .NET Framework languages" />

      <siteMapNode url="Contact.aspx" title="Contact Geekpedia" description="Contact Geekpedia.com with questions or comments" />

   </siteMapNode>

</siteMap>

The url attribute is self-explanatory. The title tag defines a title for the page, which will be shown in the bread crumb (and it will be linked to the URL specified in the url attribute). The content of the description attribute will be displayed when hovering the link, in a tooltip.

Open the three files that compose our website, Default.aspx, Contact.aspx and Tutorials.aspx. In each one of them add a SiteMapPath from the Toolbox:

Now all you have to do is compile and run. Open each page and you'll see the result:

Default.aspx:

Contact.aspx:

Tutorials.aspx:

Amazing, considering we only wrote a few lines of XML and dragged a control on the pages.

Now if you add a new page named DotNetTutorials.aspx to the project, mention it in the web.Sitemap XML file as a child of Tutorials.aspx and add a SiteMapPath control to it, you will get the following result:

And here is how you define the DotNetTutorials.aspx page, as a child of Tutorials.aspx:

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

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

   <siteMapNode url="Default.aspx" title="Geekpedia Home" description="Geekpedia.com home page">

      <siteMapNode url="Tutorials.aspx" title="Programming Tutorials" description="Programming tutorials on .NET Framework languages">

         <siteMapNode url="DotNetTutorials.aspx" title=".NET Tutorials" description="ASP.NET, C#, VB.NET and other .NET Framework tutorials" />

      </siteMapNode>

      <siteMapNode url="Contact.aspx" title="Contact Geekpedia" description="Contact Geekpedia.com with questions or comments" />

   </siteMapNode>

</siteMap>

Digg It!

Del.icio.us Reddit

StumbleIt

Newsvine

Furl

BlinkList

Rate this tutorial

Current Comments

by Abhishek on Monday, October 15th 2007 at 08:51 AM

Very Basic.... need more....

by Ninu on Tuesday, November 11th 2008 at 11:33 AM

gud wrk

by Ninu on Tuesday, November 11th 2008 at 11:46 AM

gud wrk

by dhanya on Saturday, January 17th 2009 at 12:02 PM

hi
good wrk.but i need the code to display different names for same pages.becoz i m using same page for different purpose.for eg i m using view_details.aspx to view products.if im clicking on the product headset it wl go ti view_details.aspx page

by Andrew on Friday, February 20th 2009 at 05:19 AM

This is a very simple example.

In my website I have a web page that can be accessed from 4 places.

I use masterpages and at the present time my sitemap does not work. The page that is accessed from 4 places does not work.

I have added a work around UpdateQuestionStatus.?type=1" by giving each of the pages in the sitemap a unique querystring. This allows the page to build but the breadcrumbs from the site are still incorrect.

Would you please give a more detailed tutorial.

by Jai on Wednesday, June 10th 2009 at 07:59 AM

Hi

This is a very basic example. I am using one page at many places.

Thanks

www.interviewsworld.com

by sorvin on Monday, February 1st 2010 at 09:27 AM

what a silly egxample

by sorvin on Monday, February 1st 2010 at 09:28 AM

gdwork