The Mega menu component is the primary site-wide navigation component for EC websites with complex structures. It exists to help users orient themselves within large, multi-level content structures and move efficiently between sections.
Where the standard Menu supports only two levels of navigation, the Mega menu accommodates up to three, making it appropriate for sites where content depth would otherwise force users into lengthy click paths. It also supports a 'Featured' column, enabling teams to promote content at the top navigation level.
The component is not a general-purpose navigation pattern - it is specifically designed for use as the main site header navigation.
Do's
- use short, distinct label. Keep in mind a 20% buffer to accommodate translated text in languages other than English
- group related items logically so users can find content without scanning every option
- use the featured column to promote a page that are strategically important
- choose automatic or manual population, based on whether your information architecture structured to surface automatically, or editorial curation is needed
Don'ts
- do not overload first-level items with excessive sub-items - a cluttered panel and/or multiple scrolls reduce scannability
- do not use the featured column as a catch-all for miscellaneous links - it is there to promote a piece of content, typically in a topical way
When to use
- use when the site has multiple levels of content and users will value clear, persistent orientation
- use when the volume or depth of navigation would overwhelm or exceed what the standard Menu can reasonably support
When not to use
- do not use the Mega Menu for anything other than the site's primary header navigation
- do not use when the site is a single-page or shallow content site
- do not use when the site has only one or two levels of navigation. Instead consider using the standard Menu, better suited to shallower structures and with less complexity for editors and users
- do not use for secondary or utility navigation(i.e. login, language switching, help, etc.), items that are not primary navigation destinations and should be handled through the Site Header's dedicated utility areas, rather than the Menu