Changing the look of the built-in navigation in a SharePoint site can often take quite a while and quickly turn into an annoying thing to do. The UI results are also often times not exactly what you had in mind. That is why many people decide to completely replace the default Quick Launch menu with a custom or third-party ASP .NET AJAX control. This blog post is going to show you how to easily customize the default SharePoint navigation or implemented a custom one in a separate Web Part with Telerik’s AJAX ASP .NET Menu.
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=x.x.x.x, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
Here is a sample image of what the SharePoint navigation looks like now:
You can easily achieve the custom SharePoint navigation as described above with any other control that will be able to read the same hierarchical DataSource. Such Telerik controls are our ASP.NET TreeView, PanelBar (as used in our SharePoint demos website), and SiteMap.
In some cases an easy and fast way to implement custom SharePoint navigation it is to use RadMenu as a separate web part. It can be included with all the desired images and styles that will make it look exactly as you’d like it to.
The great advantage of such navigation is that you can arrange each specific link to the other pages according to your custom needs, including adding icons, directly from the mark up without the need to follow lots of configuration and permissions.
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
"position: absolute; top: 34px; left: 10px; width: 100%;"
Image of the folders in the application
You can review and download the web part for such scenario from here.
Our Menu for ASP.NET AJAX can be also bound to a SharePoint List by loading its nodes as presented in the following code:
using (var site = new SPSite("http://websitename"))
using (var web = site.OpenWeb())
var list = web.Lists["SharepointNodes"];
RadMenuToSPList.DataSource = list.Items.GetDataTable();
RadMenuToSPList.DataTextField = "Title";
RadMenuToSPList.DataFieldID = "ID";
RadMenuToSPList.DataFieldParentID = "ParentID";
protected void Page_Load(object sender, EventArgs e)
Another interesting pretty easy way to create navigation in your SharePoint web site is by using the control bound to a SPSiteMapProvider. It provides the SiteMapNode objects that constitute the global content portion of the breadcrumb, which represents objects in the site hierarchy. It can be related with a DataSourceID to RadMenu:
Hope this was a useful piece of information and will shorten your time to reach the desired look of your SharePoint site. Please feel free to go on and ask questions or add more information on the topic in the comments below.
RadMenu and 70+ other controls are part of RadControls for ASP.NET AJAX, a comprehensive set of controls and 4 ready-to-use web parts (Editor, Grid, ListView and Scheduler) helping you build slick and easy-to-customize SharePoint farm solutions more quickly. All RadControls and web parts work seamlessly in a SharePoint 2010/2013 environment and officially pass the MSOCAF validation test. Check out the demos or download a free trial.
Plamen Zdravkov is a Support Officer at one of Telerik's ASP.NET AJAX teams, where he is mainly responsible for RadScheduler, RadAsyncUpload and RadTreeView. He joined the company in 2011 and ever since he has been working on creating online resources and helping customers with various RadControls scenarios. Plamen's main interests are connected with Web and Mobile programming and in his free time he is keen on football and nature walks.