Custom Templated SiteMap Navigator Control

After discovering the power of the SiteMap, especially when linked to Authentication, it wasn't long before binding the TreeView to the map was not enough.

I needed to have total control over what was displayed to the user for each item, so I wrote a Templated SiteMap navigator control. It works in a similar way to an asp:Repeater so should be fairly easy to comprehend.

Here is a very simple example of an implementation:

<pdh:SiteMapNavigator ID="SiteMapNavigator2" runat="Server" FromCurrentLocation="false">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li class="someting<%# Container.RelativeDepth %>">
        <a href="<%# Container.Url %>"><%# Container.Title %></a></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</pdh:SiteMapNavigator>

The above code will render a <ul> as a header then a number of <li> list items representing each link. It works with nesting, each nest level will render a new header.

Properties

The control I've written exposes a couple of properties which tell it how to navigate the site map. These are:

Lots of Templates

I have included a number of templates which represent different states of the sitemap. This example excersised them all:

<pdh:SiteMapNavigator ID="nav1" runat="Server" MaxDepth="0" FromCurrentLocation="false">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    
    <CurrentItemWithChildrenTemplate>
        <li>@@<b><a href="<%# Container.Url %>"><%# Container.Title %></a> 
        [<%# Container.RelativeDepth %>]</b></li>
    </CurrentItemWithChildrenTemplate>
    
    <ItemWithChildrenTemplate>
        <li><b><a href="<%# Container.Url %>"><%# Container.Title %></a> 
        [<%# Container.RelativeDepth %>]</b></li>
    </ItemWithChildrenTemplate>
    
    <CurrentItemTemplate>
        <li>@@<a href="<%# Container.Url %>"><%# Container.Title %></a> 
        [<%# Container.RelativeDepth %>]</li>
    </CurrentItemTemplate>
    
    <ItemTemplate>
        <li><a href="<%# Container.Url %>"><%# Container.Title %></a> 
        [<%# Container.RelativeDepth %>]</li>
    </ItemTemplate>
    
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</pdh:SiteMapNavigator>

The names of the templates should be enough for you to figure out what they do. Feel Free to download the code for this control, along with a very basic sample site.

Enjoy it and kick it!