Site Map and Bread Crumbs for your website (ASP.NET Programming Tutorial)

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.

SiteMap 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>