Click here to Skip to main content
14,089,609 members
Click here to Skip to main content
Add your own
alternative version


25 bookmarked
Posted 15 Jan 2008
Licenced CPOL

Creating a Hierarchical Navigation Without Using the Treeview Control

, 15 Jan 2008
Rate this:
Please Sign up or sign in to vote.
Learn how to bind to web.sitemap and output a hierarchical HTML list for site navigation.


The ASP.NET TreeView control is Microsoft's solution for hierarchical web site navigation, but unfortunately, it's not great for public web sites. As a result, we avoid using the ASP.NET TreeView for public web sites. It relies on excessive table layouts, requires a form runat=server, and also needs a large viewstate. Each of these issues can be addressed, but in this article, I present a cleaner, more elegant solution for your hierarchical site navigation.

Using the code

The web.sitemap is a great place to keep the site map information for your site. This solution assumes that you use web.sitemap, but could easily be adapted for other site map providers.

<?xml version="1.0" encoding="utf-8" ?>
  <siteMapNode url="default.aspx" title="Home"  description="Home Page">
      <siteMapNode url="/about/default.aspx" title="About" >
          <!--<span class="code-comment">sitemap for work--></span>
          <siteMapNode url="/about/history/default.aspx" title="History" >
            <siteMapNode url ="/about/history/earlyyears.aspx" title ="The Early Years" />
            <siteMapNode url ="/about/history/modernday.aspx" title ="Modern Day"  />
          <siteMapNode url="/about/management/default.aspx" title="Management" />
          <siteMapNode url="/about/mission/default.aspx" title="Mission Statement" />
          <siteMapNode url="/about/locations/default.aspx" title="Locations" />
          <siteMapNode url="/products/default.aspx" title="Product Line"   >
            <siteMapNode url ="/products/widgetX2000.aspx" title ="Widget 2000" />
            <siteMapNode url ="/products/widgetX2005.aspx" title ="Widget 2005" />
            <siteMapNode url ="/products/widgetX5000.aspx" title ="Widget 5000 *New*" />

To output your hierarchical navigation, I recommend the use of ul and li tags. Add style and behavior to your bulleted list by attaching a style sheet and JavaScript library. I recommend looking at Matt Krause's mktree library, which provides a simple to implement solution. This may seem like more work than dragging and dropping some Microsoft controls, and it is, but the upside is your ASP.NET page will produce cleaner, lighter weight code for web visitors. This is why this is a great solution for public websites.

The code that binds to your web.sitemap is very basic, it simply relies on nested Repeaters to bind to the XML.

<asp:XmlDataSource runat="server" DataFile="~/web.sitemap" 

     id="dsXMLSitemap"  XPath="/siteMap/siteMapNode/siteMapNode[@title='About']" />
<div id="divLeftMenu">
      <ul    id="ulLeftMenu" class="mktree">
        <asp:repeater DataSourceID="dsXMLSitemap" ID="dlXMLSitemap" Runat="server">
           <li><a href="<%# XPath("@url")%>">

Optimize with output cache

In order to optimize this code, I recommend adding output caching to your navigation user control. While the work to render out the navigation is not that significant, it still requires I/O and processing. Also, if your web.sitemap file is large, loading that into memory for every hit could take significant resources.

Minor cleanup needed

Looking at the above code, you may notice that the header template and footer template always output the opening and closing ul tags. As a result, even if no nodes are found, you'll have an empty set of tags. The code to fix this is shown below:

public void cleanUpHeader(object source, EventArgs args)
    Repeater rpt = (Repeater)source;
    if (rpt.Items.Count == 0)
        rpt.Visible = false;

Now, simply add an event handler on your Repeaters.

<asp:repeater ID="Repeater1" DataSource='<%# XPathSelect("siteMapNode") %>' 

              Runat="server" OnPreRender="cleanUpHeader">


  • 1.0 - Initial article released.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Chief Technology Officer
United States United States
Seth Berger is a Technology Director at WHITTMANHART Interactive. At WHITTMANHART he develops and manages large .NET projects for some of the world's most successful companies. He is skilled in a large number of languages and development environments but his primary focus is on ASP.NET development, and has worked on it since it was in beta. He previously co-founded Estco Medical, a web development and software company focused on the life-science industry.

You may also be interested in...


Comments and Discussions

Questionadding context menu for the same. Pin
gokulnath114-Nov-11 0:08
membergokulnath114-Nov-11 0:08 
GeneralWhy "its not great for public web sites" Pin
Hardy Wang28-Jan-08 9:54
memberHardy Wang28-Jan-08 9:54 
GeneralGood but not flexible enough Pin
Neil Chen25-Jan-08 1:13
memberNeil Chen25-Jan-08 1:13 
QuestionHow about using a simple XSL? Pin
Abi Bellamkonda16-Jan-08 11:38
memberAbi Bellamkonda16-Jan-08 11:38 
GeneralRe: How about using a simple XSL? Pin
Seth-B17-Jan-08 8:56
memberSeth-B17-Jan-08 8:56 
Generaltreeview alternative Pin
afasyah16-Jan-08 1:43
memberafasyah16-Jan-08 1:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190518.1 | Last Updated 15 Jan 2008
Article Copyright 2008 by Seth-B
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid