Creating custom menus to SharePoint sites

Sometimes we need custom menus in our SharePoint sites. In this posting I will show you how to add custom xml-based menu to your master page and make it work with SharePoint.

Here is the example of my custom menu that uses custom sitemap file to show navigation on left side of pages.

<SharePoint:AspMenu
 id="LeftMenu"
 runat="server"
 EnableViewState="false"
 DataSourceId="ContentSiteMap"
 UseSimpleRendering="true"
 UseSeparateCss="false"
 Orientation="Vertical"
 StaticDisplayLevels="1"
 MaximumDynamicDisplayLevels="2"
 SkipLinkText=""
 CssClass="leftmenu" />
<asp:SiteMapDataSource
    SiteMapProvider="XmlLeftMenuProvider"
    ShowStartingNode="False"
    id="ContentSiteMap"
    runat="server"
    />

After adding this block to master page we have to modify also our web.config file so our sitemap data source can find correct provider. Here is the example of sitemap providers section in default web.config file of SharePoint Foundation 2010 (it is located in virtual web application root folder):

<siteMap defaultProvider=“SPSiteMapProvider” enabled=“true”>
    <providers>
   <add name=“SPNavigationProvider” type=“Microsoft.SharePoint.Navigation.SPNavigationProvider, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
   <add name=“SPSiteMapProvider” type=“Microsoft.SharePoint.Navigation.SPSiteMapProvider, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
   <add name=“SPContentMapProvider” type=“Microsoft.SharePoint.Navigation.SPContentMapProvider, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
   <add name=“SPXmlContentMapProvider” siteMapFile=“_app_bin/layouts.sitemap” type=“Microsoft.SharePoint.Navigation.SPXmlContentMapProvider, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
    </providers>
</siteMap> 

Let’s add the following provider definition to providers block:

<add name=“XmlLeftMenuProvider” siteMapFile=“leftmenu.sitemap” type=“Microsoft.SharePoint.Navigation.SPXmlContentMapProvider, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” /> 

Couple of things to notice:

• we are using the name XmlLeftMenuProvider – this is exactly the same name we used in sitemap data source definition,
• we are specifying here siteMapFile – this attribute tells to provider what is the file name to read.

Now let’s add leftmenu.sitemap file to web application folder. Here is the example content for file:

<siteMap>
  <siteMapNode title=“Home” description=“Home” url=“~/default.aspx”>
    <siteMapNode title=“Products” description=“Our products”
      url=“~/Products.aspx”>
      <siteMapNode title=“Hardware” description=“Hardware choices”
        url=“~/Hardware.aspx” />
      <siteMapNode title=“Software” description=“Software choices”
        url=“~/Software.aspx” />
    </siteMapNode>
    <siteMapNode title=“Services” description=“Services we offer”
        url=“~/Services.aspx”>
      <siteMapNode title=“Training” description=“Training classes”
        url=“~/Training.aspx” />
      <siteMapNode title=“Consulting” description=“Consulting services”
        url=“~/Consulting.aspx” />
      <siteMapNode title=“Support” description=“Supports plans”
        url=“~/Support.aspx” />
    </siteMapNode>
  </siteMapNode>
</siteMap>

Now it’s time to save our changes and try out the custom menu. It will appear exactly where you put it and it will show the navigation based on leftmenu.sitemap file.