Create Custom Navigation for SharePoint:AspMenu using a asp:Repeater

As you are probably aware, there are many different ways to create a navigation in Sharepoint 2010. This blog will focus on ONE specific way that is both easy and powerful. I will show you how to create a left navigation without overwhelming readers with loads of information they don't need and can probably figure out on their own.

1) Create the menu hierarchy in site settings.
Go to Site Actions > Site Settings > Navigation
Create all the menu entries and sub-entries that you need for your menu.

2) In the master page, there should be a node for the SharePoint:AspMenu. It should look something like the following:

                    <!-- top navigation publishing data source -->
                  <PublishingNavigation:PortalSiteMapDataSource
                      ID="topSiteMap"
                      runat="server"
                      EnableViewState="false"
                      SiteMapProvider="GlobalNavigation"
                      StartFromCurrentNode="true"
                      StartingNodeOffset="0"
                      ShowStartingNode="false"
                      TrimNonCurrentTypes="Heading"/>
                   
                  <!-- top navigation menu (set to use the new Simple Rendering)
                  <SharePoint:AspMenu
                    ID="TopNavigationMenuV4"
                    EncodeTitle="false"
                    Runat="server"
                    EnableViewState="true"
                    DataSourceID="topSiteMap"
                    AccessKey="<%$Resources:wss,navigation_accesskey%>"
                    UseSimpleRendering="true"
                    UseSeparateCss="True"
                    Orientation="Vertical"
                    StaticDisplayLevels="2"
                    MaximumDynamicDisplayLevels="2"
                    SkipLinkText=""
                    CssClass="s4-tn">
                   </SharePoint:AspMenu>

It is not easy to apply custom styling to this and even the styling capabilities it has is limited.

3) In order to apply custom styling, we will use asp:Repeater to dynamically generate the desired html/css code. The following code can replace only the SharePoint:AspMenu and should allow you create whatever html/css code you need for styling. This is a two level navigation where each main header can have multiple children. This can be specified in the Navigation site settings.

                        <asp:Repeater runat="server" ID="MenuRepeater" DataSourceID="topSiteMap">
                           <HeaderTemplate><div class="arrowlistmenu"></HeaderTemplate>
                           <SeparatorTemplate><img src="images/eOne_leftmenu_divider.gif" height="2" width="164" /></SeparatorTemplate>
                           <ItemTemplate><h3 class="menuheader expandable"><a href="<%# Eval("Url")%>"><%# Eval("Title")%></a></h3>
                           <asp:Repeater runat="server" ID="ChildMenuRepeater" DataSource='<%# ((SiteMapNode)Container.DataItem).ChildNodes %>'>
                              <HeaderTemplate><ul class="categoryitems"></HeaderTemplate>
                              <ItemTemplate>
                              <li><a href="<%# Eval("Url")%>"><%# Eval("Title")%></a></li>
                              </ItemTemplate>
                              <FooterTemplate></ul></FooterTemplate>
                          </asp:Repeater>
                           </ItemTemplate>
                       
                           <FooterTemplate></div></FooterTemplate>
                       </asp:Repeater>

I will now explain some of the template elements in the asp:Repeater.

HeaderTemplate - Anything between these tags will be outputted ONCE before the repeater begins looping for the itemtemplate

SeparatorTemplate -Anything between these tags will be outputted between each item template

ItemTemplate - Anything between these tags will be applied for EACH element in the source data, in this case out navigation entries. Further more, you can use another repeater inside this to output the sub-entries as shown in the code above.

FooterTemplate - Anything between these tags will be outputted ONCE after the item templates have outputted.

I hope this tutorial have been helpful in creating a custom styled navigation for Sharepoint 2010.

Please contact for feedback or questions.