Example Menu: Multiple rows

There are times when you have a larger number of second-level menu items, each with a smaller set of links sitting beneath them. In this situation, it can be better to allow for multiple rows of menu links. 

A grid of second-level menu items

By default, the mega menu app will automatically adjust column widths so that all are equal size and fit on a single row. 

To get more fine-grain control over how menu item lists are assigned to columns, you can switch to "Grid" mode. This is managed in the design options tab of the top-level menu item. When you choose Grid, you then also get to choose how many columns there should be in your menu. In this case, we've chosen 5 columns.

That's all that's needed to create this kind of menu. No special settings are required on any of the second or third-level menu items. Once you've added five second-level menu items, the sixth second-level menu item will be positioned on the next row. 

A grid of third-level menu items

People recognise images faster than text so a grid of images can be a useful technique in guiding customers through the site navigation. 

In this example, we have "All Gadget & Tech Gifts" as a second-level menu, and then each of the third level menu items have images uploaded to them. 

To create this 5 column grid, we have first set the top-level "Gadgets" menu item to be a grid of 5 menu columns in the Design tab. 

Then on the second-level "All Gadget & Tech Gifts" menu item, we have told it to span 5 columns. This means that it will be full-width. We have also ticked "Wrap content" to ensure that the children will wrap to make use of all the available space rather than be in a single column. 

For more information read our guide to wrapping lists.