Using a Mega Menu on your Kentico website can have added benefits over using a regular dropdown menu. Not only can your visitors easily see everything at once without having to scroll, but they can also help illustrate relationships between pages and sub-pages.
Mega Menus have become a common design pattern on modern websites and they can be a great usability tool.
On this article I will go over a recent project where I was tasked to develop a Mega Menu on a Kentico-based site (v10).
For this purpose I created a Kentico/Bootstrap(v4.5) prototype which you can download here.
To follow along, make sure you download the above package and upload/create the files on your Kentico site.
I won’t go into detail on how to get your Kentico theme set up. If you’re new to Kentico please see other themes tutorials.
Assuming your Kentico site is set up and ready to go, we’re now ready to dive into the intricacies of creating the Mega Menu.
On your Administration console, go to Page Types and select Page (menu item) and then select Transformations.
Create a new Hierarchical Transformation and name it MegaMenu1 or something that makes sense to you.
Under the new Hierarchical Transformation create a Footer Transformation called MegaMenu1-Footer0 with Level: 0, uncheck the Apply to sublevels, change the Transformation type: Text/XML and add this HTML code:
</li> </ul> </li>
Next, create a Item Transformation called MegaMenu1-Item2 with Level: 2, uncheck the Apply to sublevels, change the Transformation type: Text/XML and add this HTML code:
<li>
<a class="dropdown-item" href="{%GetDocumentUrl()%}">{%HTMLEncode(DocumentName)%}</a><span>{% MenuItemInfo %}</span>
</li>
Next, create a Footer Transformation called MegaMenu1-Footer1 with Level: 1, uncheck the Apply to sublevels, change the Transformation type: Text/XML and add this HTML code:
</ul>
Next, create a Item Transformation called MegaMenu1-Item1 with Level: 1, uncheck the Apply to sublevels, change the Transformation type: Text/XML and add this HTML code:
<li><a class="dropdown-item" href="{%GetDocumentUrl()%}"><b>{%HTMLEncode(DocumentName)%}</b></a><span>{% MenuItemInfo %}</span></li>
Next, create a Item Transformation called MegaMenu1-Item0 with Level: 0, uncheck the Apply to sublevels, change the Transformation type: Text/XML and add this HTML code:
<li class="nav-item dropdown mega-dropdown">
<a href="{%GetDocumentUrl()%}" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >{%DocumentName%}</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="row">
Next, create a Header Transformation called MegaMenu1-Header1 with Level: 1, uncheck the Apply to sublevels, change the Transformation type: Text/XML and add this HTML code:
<ul class="col-md">
Next, create a Separator Transformation called MegaMenu1-Separator0 with Level: 0, uncheck the Apply to sublevels, change the Transformation type: Text/XML and add this HTML code:
</ul> </li>
Next, create a Separator Transformation called MegaMenu1-Separator1 with Level: 1, uncheck the Apply to sublevels, change the Transformation type: Text/XML and add this HTML code:
</ul> <ul class="col-md">
So, your final Hierarchical Transformation should look like this:
Before we dive into creating the new pages for the Mega Menu we need to customize the Page Form to take an extra field that display a short description or image under links on the menu.
On your Administration console, go to Page Types and select Page (menu item) and then select Fields.
Add this new field:
MenuItemInfo as Long text/ Rich text Editor
Now, you can display in the Mega Menu extra content, images/videos or anything that WYSIWYG Editor can take.
Next, on the MegaMenu master page template, let’s add a “Hierarchical Viewer” web part on the zone where you would like the menu to appear.
So, add a new “Hierarchical Viewer” web part and add the following requirements:
Path: Add the path to your content
Maximum nesting level: -1
WHERE condition: DocumentMenuItemHideInNavigation = 0 (this will preserve the page option to be hidden from the menu)
Hierarchical transformation: CMS.MenuItem.MegaMenu1 (this is the main Hierarchical Transformation you created earlier: MegaMenu1)
Use default hierarchical order: checked
Hierarchical display mode: Inner
Hit Save and Close.
Done. Now, it is time for you to add some pages on your site so your new Mega Menu will display correctly.