A compliant navigation control for SharePoint.

Following on from my post about creating a MOSS WCM website using a div based layout, I am going to describe a simple way to create a web standards compliant navigation control.

One of the short comings of the sharepoint:aspmenu or the asp:menu control is that they render horrible table tags. By using CSS adapters (Check out CSS Friendly) we can still take advantage of the built in controls but render the output in div and ul, li tags to create our site navigation. I use the MOSS PortalSiteMapProvider as my site map provider.

1) Firstly I created an empty class definition (MyMenu) that inherits from System.Web.WebControls.Menu.

 
public class MyMenu : System.Web.WebControls.Menu
{
}

This is done so that we have explicit control over which controls are adapted. If we decided to adapt the System.Web.WebControls.Menu directly all controls of this type would get rewritten even if we didn't want them to. This happened to me the first time I tried it in SharePoint, I ended up modifying every menu in the site including the Site settings and Application pages, obviously these are will not be seen by the anonymous user, hence I am not concerned by the fact they render in table tags.

2) Download the CSS Friendly Adapters either download the source code and sign the assembly (we can now place the code in the GAC) or place the binary in the Web application /bin folder. You may have to raise the trust level in the Web.config also.

3) Create a .browser file that adapts our control in 1) using the adapter in 2) an example of this is shown in the CSS Friendly project.

4) finally I wrapped the MyMenu control and PortalSiteMapProvider into a SharePoint ControlTemplate ascx. This was done to a) to keep my master page clean and tidy, and b) to remove some of the complexity of configuring the site map provider for future reuse.

5) Add the control template to the masterpage.

6) We can now style the control as normal using our custom .css file.

For more information and a tidy implementation of adapting a "wizard" control check out Toke's blog post here.