Creating the main navigation is one of the first big tasks on any website build. On the majority of simple websites, a menu can be structured based on the top level hierarchy of the page tree, so image a scenario like: In a classic scenario Page 1, Page 2 and Page 3 would be the primary menu items. If you wanted to hide an item you would uncheck the 'Display page in menus' button.
The problem with many modern websites is the primary menu might not follow the page hierarchy structure, or, the menu might also contain promo blocks, links or images. A quote from Wikipedia 'Mega menus are large navigation panels that typically drop down or fly out from a global nav bar'.
While they certainly aren't appropriate for every site, mega menus can create a great navigation experience for a user, when done well' If you want a mega menu in your Episerver website, then following the traditional primary menu approach is probably the wrong pattern.
In these circumstances, trying to shoehorn a menu into your page's navigation structure causes more problems than it is worth. In today's guide, we're going to talk about creating a separate area in your Episerver tree just for navigation to allow us to create a lot more feature-rich and more complex navigation.
The Mega Menu
In today's tutorial, we will build this menu.
The mega menu we will create in this tutorial will not be based on the website's page hierarchy. This can be made up of any number of items that live anywhere in the site tree. Each menu item will have an image attached to it, and any of the menu items that has child sub-menu pages will be rendered with an extra menu.
In order to build the menu, we will need three-page types, in a menu container. This will be the area we will store the menu under, the menu to hold the menu title, the link, and the subtitle and lastly the submenu to store any sub links. Using these page types the menu will look like this:
Sub Menu Page
To create a mega menu items sub menus I'm going to create an additional page type called sub-menu. Any sub-menu pages that are children under a menu item will be rendered as an additional pop-up menu. I could have also achieved the same effect by putting a content area on the menu item and adding item that way.
I'm assuming your end menu will be more complex than my basic example, so I went the page type route, but, in terms of architecture, it makes no real difference in this scenario. My advice would be for a simple link list to use a content area and a block, for more complex submenus use a page type as it will give you a bit more flexibility.
In today's tutorial, we've talked about the difference between a simple main navigation that is limited to the hierarchy of your page tree and a more complex menus that will not limit you and allow you to create more flexible menus like a mega menu.
To create the mega menu we create an area outside of the start page that will be used as a container for the menu. The menu will then be built up from two different page types, a menu page and a sub menu page. The sub menu page type could be swapped out for a content area in the menu page.
Using a page type allows us a bit more flexibility but the difference isn't worth it. To create the menu we built a menu repository that built the menu and returned it in the master layout file (download the code sample for this).
As always a fully working code sample can be downloaded from my Github page EpiserverMegaMenu.