Mega Menu

A mega menu is an alternative to a drop-down menu in the header.

General guidelines

Mega menu appears when users hover a menu item in the header. Favour mega menus to drop-downs if you have to present numerous options as it reduces the amount of click through.

MegaMenu1

Mega menu appears when users hover a menu item in the header. Favour mega menus to drop-downs if you have to present numerous options as it reduces the amount of click through. 

Keep in mind that presenting too many options at once can increase the cognitive load, making it harder for users to find what they need at best and leading to action paralysis at worst.

 

For this reason:

  • Organise mega-menu items in an orderly fashion and logically. Mind the order of your categories (the first ones being the most important/popular ones, verify users behaviour and analytics). Don’t hesitate to place an additional category underneath another in the same column.
  • Make sure each category adds real value. Refrain from adding irrelevant additional categories just because there is space.
  • Make sure to keep labels concise and easily understandable (avoid acronyms). Doing otherwise can make it hard for users to find the information they seek and could result in a drop-off.
  • Make sure the labels within a category are consistent with each other and with their own category. Inconsistencies can confuse users and result in engagement loss.

 

It is recommended, when relevant, to use a visual mega menu (photos or icons) as it catches users attention and helps them navigate more intuitively. It also represents a good opportunity to display the product/service portfolio offered at a glance.

MegaMenu2
MegaMenu3
MegaMenu4

It is fine to use different elements of content into one mega menu but maintain some degrees of consistency within all mega menus of your application. 

MegaMenu5
Visual guidelines

Behaviours

Mega menu items have 5 states: default, hover, focus, active and disable.

When enabled, each mega menu item is interactive, meaning users don't have to target the photo, icon or copy to open it, the entire container is clickable.

MegaMenu6

Visual variants

Select the correct mega menu background depending on the application type.

Blue background for B2B application:

MegaMenu7

Transparent background for B2C application:

MegaMenu8

White background for B2E application:

MegaMenu9

Motion

Allow 0.3 seconds delay before revealing the mega menu. Doing so prevents the accidental triggering of menus which can rapidly irritate users.

Best practices
MegaMenu11

When the mega menu opens, cover the content with an overlay (Primary blue - 100 (#001B4D) with 60% opacity).

MegaMenu12

If the content is not covered by an overlay user's attention can be lose.

MegaMenu13

When relevant, list the content by alphabetical order within the categories

MegaMenu14

Don't change the colour nor blurriness of the transparent mega menu background.

Responsive behaviours
MegaMenu10
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top