How to Create a MegaMenu in Sitefinity

Since many of you are interested in creating MegaMenu navigations with Sitefinity I decided to write a blog post about it. In this blog post I'm going to show you how to create two types of MegaMenu navigations. The first one is a dropdown navigation, where the direct children of the first level items of the navigation contain another navigation control (RadSiteMap), configured to show all child pages under the first level parent. The second one will allow you to add images and some Page properties to the item. Let's start with:

1. MegaMenu with RadSiteMap:

We use the SiteMapNavigationMenu mode of our navigation control. This is a separate class, which we reference with the following TagPrefix:


In the code-behind we subscribe to the ItemDataBound event and create a new RadMenuItem, which will hold the RadSiteMap if the currently bound item has children. This radSiteMap will display only its children. In this part of the event we create a new TemplateInfo, which contains the inner template information, or else said - contains the path to the ascx template, which contains the RadSiteMap.


This template will be then used to build the news RadMenuitem. We get the real template from the templateInfo, using Controlutilities, and instantiate it in an ItemContainer. ItemContainer is a separate class we've created, that inherits from GenericContainer and in it we access the radSiteMap control from the ItemTemplate.ascx, as well as the SiteMapDataSource. Let's take a look at ItemTemplate.ascx. Notice the simple markup, that contains only the SiteMap and its datasource.



This way we make sure that only pages, that are published and with ShowInNavigaton, set to true, will appear in the inner navigation (the RadSiteMap). Then we set the StartingNodeUrl of the SiteMapDataSource control from InnerTemplate.ascx to the currently bound page. This way only children of the parent item will appear in the RadSiteMap. So, for example, if you have p1 on first level and p11, p12, p13 are children of p1, they will be displayed by the RadSiteMap from Itemtemplate.ascx, as well as their children. The last thing I do is to hide all items, that aren't first level, from the main SiteMapNavigationMenu navigation. Here's how this works.
The label will show the page description, the image - an image (with the same title as the page), and the HyperLink - a link to the page. Then we practically access these controls through the properties and assign values to them:


Here's a video, demonstrating how this approach works. The p21 page has a description and an image (image in the library with title p21 - this is the only way we can retrieve it on the ItemDataBound event).

MegaMenu with RadSiteMap

MegaMenu with Images and description