The Megamenu is an advanced navigation component designed for complex sites with deep hierarchies. Unlike the Horizontal menu, which supports up to two levels, the Megamenu can provide descriptive text for first level items, accommodate up to three levels of navigation, and additionally allows a featured column that can be used to either promote parent-page specific or site-wide pages, hidden deep into the lower levels of the hierarchy.
Currently, it offers two display options on 2nd level items, specifically:
- automatic: opting for this will allow to automatically populate a side navigation with parent pages & children, reflective of the site’s information architecture
- manual: displaying a container where editors can add navigation components for a custom set-up
Do’s
- group related items logically for clarity and ease of use
- keep first level items (displayed horizontally) labels' short and distinct, keep in mind a 20% buffer for other languages
Don’ts
- do not use for anything else except the website's main navigation
- do not overload the menu with excessive items or clutter, in order to prioritise scannability
When to use
- use for sites with multiple levels of content or complex architecture, requiring clear organisation or when a horizontal menu would be insufficient
- use when you’d like to carefully curate links to be displayed, as the Megamenu offers the ability to opt-out pages
- use when you want to promote certain pages that are hidden deep within the information architecture
When not to use
- when you only have a one-page or a content shallow web site
- do not use for simple websites with only one or two levels of navigation — opt for a Horizontal menu component instead