Custom sitemap in SharePoint

In the story today will show you how a sitemap can be used with a SharePoint site to create a custom navigation control for SharePoint.

Scenario

I am having a website, that has few application pages. Those pages have to be linked via custom breadcrumb control. Let's say that this is project management site, and the pages are: Projects.aspx (the list with all available projects), ProjectDetails.aspx (details for a single project), ProjectExpenses.aspx (the expenses details for a selected project) and ProjectResources.aspx (list with employees that are assigned to the selected project). My breadcrumb should have 3 links only: Home -> Projects -> Project Details, but when user opens expenses or resources links, he/she should be able to navigate back to the current Project Info page by clicking on the breadcrumb link.



Sitemap File

I am going to use a simple sitemap file, located in Layouts folder of my project, where my application pages are.

This sitemap describes a tree of project pages according to their location in the hierarchy:

Pay attention to the nodes describing Project Resources and Project Expenses links. They have 2 additional properties called " hideInMenu". I am going to use these properties later on to make sure that those 2 nodes are not shown in my breadcrumb control.

Breadcrumb Control


For a breadcrumb I will use a custom user control (located in ControlTemplates folder). This control will read the sitemap, and based on the data and current location will generate the links to show. Here, as a sample will use the most-dummy approach - read and display right away. In real-life-project, I would wrap each sitemap node in a custom object, or create and XSLT schema to read and display the content for example.
To read the sitemap, I will use XmlSiteMapProvider. There are many samples on the net how to load sitemap file, so I will not stop on this piece now (besides, this sample code will be provided for download). Once sitemap is ready, I can get what is the current node based on my location:

Each sitemap node has a property ParentNode, and this is what I will use to construct the menu tree:

To check if node should be shown in menu, I use a helper method that checks its "hideInMenu" property:

When all nodes are loaded in my dictionary, I have to construct the links for the breadcrumb:

And here is the result:

Nothing high-tech, but very clean as solution and easy to use. You can download the sample code from here.