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.