A Mega Menu is a great way of displaying a large amount of menu items in an organised and compact way. If you have a large number of product categories, then this is the type of menu for you.
The first thing we need to do is find where to create a Mega Menu. This is listed in Content > Menus > Mega Menu:
Once we're on Mega Menu, you will see there is a quick guide on how the sections work.
We work with colours. Blue are the main links which customers will see on the header, Green which are columns, and Red which are links.
Creating a Mega Menu
First we need to click on 'Add Menu Item', which will automatically give us a Blue box.
This 'New Item' is our link. As we know, blue means it will appear first on the menu and the one which is visible to customers.
To make this blue box into a link, we need to click on the three dots and it will expand into an editing area. This link can be anything from a Page, to a Category, to a Custom Link. This is where we can link this to anything we want.
As you can see, when we write the link name into the Link area, it will automatically change the name of the box. This name can be changed. For example, we can change the name from 'Home' to 'Main', and it will still link to the Home page.
By adding another menu item and dragging it to the right, we notice it changes to green and red.
When changing a link to a Category, we can add Children underneath (also known as Sub-Categories, these are categories which are inside a main one).
By selecting 'Add Children', it will automatically add it's sub-categories.
You can also do this manually by selecting 'Item Below', dragging the links to green, and adding the category names in.
This can also be a dropdown to other links, which is the next step
Columns and Section Titles
If we would like Section Titles, which are bold and outlined titles for links to be underneath, we need to add columns too. Here's how:
We first need to create our Blue box with a Green box below, then add our Red boxes underneath those (as shown above).
As mentioned before, our Green box is typically our Column box. Once you have red links under the green box, an option will appear in links to make the Green box a Column.
In Preview, this will now show the links as a column compared to a standard dropdown.
Next, we need to add section titles. These are made in the Red boxes. We need to add a Red box underneath the Green, and (in the same place we found 'Column') we select 'Section Title'
Once we've changed this to 'Section Title', we can then add the title's name typically where we add the link name.
Once you have an idea how to do this, rinse and repeat underneath! To add another column, go Green, then add Red. To add another main link, go Blue, then Green, then Red. Simple!
Let's have a look in our Preview mode.
Select 'Preview' in the top right. Alternatively, add it to your Header in BlockLab to see a Preview on your website.
This is our test preview:
And here how it looks on our site: