In today's tutorial, you will learn how to create a mega-menu within Umbraco. A mega-menu is a more advanced menu that not only contains links to other pages but also contains sun-menus and images.
On most projects I build nowadays, I usually end up creating a variation of a mega menu, using a standard CMS based pattern for creating advanced menus.
To build the menu I'll also be using uSiteBuilder. If you want to know how to use uSitebuilder I have written this guide, How To Build An Umbraco 7 Document Types In Visual Studio – USiteBuilder Explained .
To fully understand the project available from my GitHub that accompanies this article, I would also recommend reading How To Create A Global View Model For Umbraco With uSitebuilder.
The mega-menu we are going to create will look like this:
The Menu Container
This first thing we will need is a container page that we can use as a placeholder to create a menu. This container page will not be displayed on our website, it will live on the same hierarchy level as the homepage in our CMS content tree. The code to create this document type will look like this:
The code is simple, all we really need is a container, that doesn't need any properties. In Umbraco CMS create a Menu container:
The Menu Document Type
Now, in some projects you could get away with not following this step, although I do not recommend it. Now we have a container area for the menu, we could create a 'Menu Item' document type, add them under the container and just that as the basis of the new menu.
The problem with this approach, is that what happens if you need to create more than one menu (like a secondary menu), you need to implement a multi-language project at a later date and you need different menus for each language or, another common one, you want to do A/B testing on your menu to see what converts the best.
If any of these sound like potential requirements, then it's a good idea to be able to create multiple menus. We do that by creating a Menu Document Type. Like the menu container, the menu document type is a simple places holder. The code for the menu container looks like this,
We also need to update the menu container now, to allow MenuDocument types to be created as children:
Go back to the Umbraco back-end and we can now create a menu page, under the menu container:
Create the page
Menu Item Document Type
Now we start to get to the interesting parts. The next step is to create the menu items. These will be the top-level items that will get displayed in our menus.
The menu document type is the top-level, items that will be displayed in our website. The first property 'MenuTitle' is the text that will be displayed for the menu item, next we have the Url the menu will point to and lastly, we have an image property to set the image for the menu item. Now we have another child template, we need to set the 'Menu Document Type' to allow 'Menu Items' to be created as child nodes:
Now we have everything to create a menu, we need a way to set it. To do this I usually add a property to the home page document type, called menu:
In order for a menu to be used, a content editor needs to go into the back-end, and, on the homepage, pick the menu they want to use, save and publish it.
Sub Menu Document Type
The last document type we need to create is the sub menu item, these are the sub links that will be displayed under our main navigation.
The sub menu document type will be used to create the secondary level menu items, as shown below:
Define a property to display the grey header and then we have 5 Url and title properties to render the menu. The next thing to do now is open up the Umbraco backend and add in some data for us to render out, like so:
The html and css...
I recommend checking out the associated project to see this in full as it's quite complex. In the layout.cshtml, I added a reference to a file called Header.html. In there I then use the following HTML:
The code above can be quite hard to wrap your head around when it's all a flat page or text. To make life easier, I would recommend downloading this working code sample from my GitHub account, JonDJones.com.Umbraco.MegaMenu
In order to create more complex menus, it's a good idea to create a separate section in your page hierarchy and define your own document types to render out everything you need. On most projects, I'll usually use four document types to define my menus. One as a container to store the menus, one document type to define the menu, one document type to define the primary navigation areas, and one to create any sub menu items. Depending on your design, you will want to structure and design your document types accordingly, then render out the menus by iterating through the menu collection.