Mega menus – A comprehensive guide

You’ve probably noticed that large e-commerce sites have countless categories and subcategories. To prevent the top navigation from overflowing or users from getting lost in dropdowns that keep opening, mega menus are an option to solve this problem. Mega menus are the large format of dropdowns of the navigation on a website. Instead of containing just a few links to other pages or subcategories, mega menus offer a variety of content elements that are not limited to text. They can include icons and images, as well as videos or even card elements, thus providing not only more content, but also a richer palette of content presentation options.

Mega menus simplify navigation and also add interest and insight for users. When there are categories and subcategories on a page, a mega menu can be an interesting alternative to a dropdown. However, the more categories there are on a page, the more information is lost for users in traditional navigation and it becomes harder for them to find relevant content. But even with few (sub)categories, a mega menu can mean improved navigation for users.

So whether or not you use a mega menu doesn’t necessarily have anything to do with countless categories, but is much more a form of structured presentation for users. Mega menus offer more appealing ways of grouping content and also presenting it visually, for example using images or videos. This is usually not possible in conventional navigation elements. This strengthens the user’s orientation and promotes interaction.

There are a few basic rules you should follow when designing mega menus. But don’t take them too rigid, because in some cases rules are there for being broken and especially in design it always depends on the individual case.

Grouping

Mega menus often contain numerous options. If your website has a good information architecture, you will be able to define a category for most of the links you want to include in your mega menu, or at least identify related groups. Take advantage of these similarities and organize the content of the mega menu into groups. This way you simplify the navigation within the mega menu for the users and thus also the decision for their next click.

Layout

When it comes to layout, you don’t necessarily have to stick to a specific design. For different mega menu dropdowns on the same website, different approaches and layout styles can be quite useful. For example, for a dropdown with products, you could display image thumbnails in addition to category names if the number of categories is not too huge. Other dropdowns can be simpler and consist of grouped links. If a mega menu contains content of a blog, in addition to the categories, for example, the two or three most recent blog articles can also be displayed with a thumbnail image.

Trigger for Mega Menus

Mega menus take up a lot of space in the interface, so when they are opened, a big shift takes place in the current view. New elements are added, others are hidden. This change in the content should not happen «by chance» or unexpectedly. Therefore, the following points are important for a smooth interaction for the user:

• It’s recommended to open mega menus with one click and close them only if clicked outside.
• If you use ‹open on hover› instead of a click, delay the opening of the mega menu by 0.5 seconds, so that the menu doesn’t open on every random hover over the navigation item, causing an unwanted flickering in the user interface.
• You should use the same time delay when the pointer leaves the mega menu and the navigation item in the top navigation again. This also avoids the flickering effect.

No Action, only navigation

Mega menus are definitely components used best for navigation. So avoid putting actions in your mega menu. The newsletter subscription or the contact form should not be part of the mega menu. Also, the search input field should not be integrated into a mega menu, but placed in the layout so that it is visible and accessible at all times.

beAnywhere has a mega menu for navigation items since the last UI update, which previously had a simple drop-down.

Why beAnywhere uses a mega menu

For beAnywhere, we decided to go with a mega menu because it offers more visual options to make content quickly and easily accessible to users. Photography is a main theme on beAnywhere’s site, so we wanted to put more emphasis on the visual effect in the menu as well.

Image categories in the photo portfolio and photo blog posts, as well as the various sports & travel story formats, can be presented much more vividly through the combination of text and thumbnail images than before in the simple dropdown menu and uses are addressed directly.

Content parts

The different dropdowns are not designed equally in terms of content, but they are kind of similar. In total, we have created three different content components within the new mega menu.

• Post preview
  The preview image is displayed with rounded corners and the title of the post is displayed next to it.
• Portfolio categories
  Here we have used a card design that is rounded at the corners. The thumbnails for the portfolio categories are in the square, while the category name and a short intro text are on the right part of the card.
• Additional links
  Other links we have provided with a combination of a square containing an icon and additional text. The text always consists of a header and a further explanatory row.

In order to get to all other articles from the mega menu, there are buttons above the respective content area for direct access to the respective category page.

Design variants & interaction behavior

For the Mega menu, we at beAnywhere have created two variants. One design in full-width layout, which spans the entire site width, and a variant that comes in a boxed layout. But why?

Some pages, such as the overview pages of the stories, already have text and other elements above the fold, that is, in the visible section of the page before you scroll. On these pages, it is relatively clear that you can scroll further because of the elements that are still visible when the menu is open despite the background.

However, other pages, such as the home page, only have a screen-filling image above the fold. If you were to open the full-width mega menu on this page, only a small part of the background image would be visible at the bottom, but nothing else. In addition, a full-width mega menu would look very bulky here. To lighten up the interface, we have decided to switch to a boxed layout for above-the-fold images. The mega menu is then only as wide as the widest content and also has a slight opacity.

However, if you scroll down further with an open boxed layout and the other content of the page appears below the menu, the layout of the mega menu changes to full-width. When scrolling back up, the day layout above the fold changes back to a boxed layout.

But something else changes depending on the page and interaction, namely the color theme.

Light and dark theme

Besides the layout of the pages, there are also light and dark theme pages. For clarification, here is a list of possible combinations:

• Light theme design, content already above the fold
• Light theme design, image above the fold
• Dark theme design, image above the fold

In the first case, with light theme and content above the fold, the mega menu is full-width and in the light theme. There is no change when scrolling the page.

On a page in the light theme but with a full screen image above the fold, the opened mega menu would result in an extremely hard contrast between the background image and the menu. That is why mega menus above images are always in the dark theme. However, in order to keep the large menu from appearing too bulky, it is in boxed layout. When scrolling down, two things change:

1. The variant changes from boxed to full-width layout.
2. The theme changes from dark to light.

On the other hand, if you open the mega menu on a dark theme page (which currently always have an image above the fold), the boxed layout changes to full-width, but the dark theme remains for consistency on the page.

If you want to learn more about mega menus and need some inspiration, here are some helpful links:

• 10 Well-Designed Mega Menu Examples
• Mega Menus Work Well for Site Navigation
• 7 Examples of Creative Mega Menu Designs

As you see, there are a few basic rules you should follow when designing mega menus. But don’t take them too rigid, because in some cases rules are there for being broken, and especially in design it always depends on the individual case.