A mega menu is a wide panel that opens from a menu link. Instead of a plain list, it shows each nested link with its icon, its label and a short description.
Any link with links nested inside it becomes a submenu. The Submenu Type decides how that submenu opens.
Dropdown: a compact list of the nested links.
Mega menu: a wider panel with the nested links laid out two per row, each with its icon and description.
Mega menus work best in a horizontal Menu element in a top bar, where the panel opens as visitors point at the link.
1
Open the navigation
Go to Pages and Menus, then Navigations, and choose Edit content on the navigation your menu shows.
2
Pick the parent link
Select a top-level link. A Heading is a good choice when the parent should not link anywhere itself.
3
Nest links inside it
Drag links onto it, or use Add a link inside.
4
Choose the type
In the parent's Submenu part, set Submenu Type to Mega menu.
5
Describe the children
Select each nested link and fill in its Description and Icon.
6
Save
Click Save Changes.
The Submenu part only takes effect once the link has links nested inside it.
The look of the panel is set on the Menu element, not in the navigation. Select the Menu element in your menu builder and open Mega Menu Typography.
Title Size
The size of each nested link's label.
Title Weight
How bold those labels are.
Title Color
Automatic, Dimmed or a Custom color.
Description Size
The size of the description line.
Description Color
Automatic, Dimmed or a Custom color.
The Submenu part of a parent link has a few more switches that matter mostly in vertical lists, such as the mobile drawer or a sidebar, where submenus open in place.
Start Open
The submenu starts expanded.
Collapsable
Visitors can open and close the submenu.
Show Chevron
Shows the small arrow next to the parent link.
Keep descriptions to one short line. A panel full of long sentences is harder to scan than a plain dropdown.
