Over the years, we’ve seen many different trends in the world of web design—some have faded away, others continue to be widely used. Strangely enough, during 2017, some of these trends turned into something special. In other words, despite appearing useless or being disliked by users, web designers kept incorporating these elements into their projects. And what’s most interesting—their projects turned out to be successful.
One of these trends is the large dropdown menu, or “mega menu.” A few years ago, this type of menu gained popularity, but as a trend and element, its shelf life seemed limited. Many designers now treat the concept as secondary. Still, it’s out there and still in use. These are desktop-oriented projects that often also include mobile design elements. And the seemingly endless popularity of this feature has a fairly logical explanation.
What exactly is a mega menu?
Regardless of how many new trends come and go, the main focus for web designers remains improving the user experience (UX). With navigation—whether it’s fullscreen or single-page scroll—we always try to meet two main goals: ease of use and user convenience. That’s why websites with similar themes and structures can still feel completely different to users.
The popularity of large menus grew alongside the rise of e-commerce projects. The reason? They are quite different from standard dropdowns. Instead of simply unfolding vertically, mega menus expand widely and are often multi-column.
Mega menus are definitely trending. Visitors can quickly grasp the theme, structure, and content layout of a site just by looking at the menu. If a mega menu simplifies access to more site content, then of course designers use it. However, this trend is almost entirely unsuitable for mobile design—there’s just no space for such large menus on small screens. Yet, mega menus remain popular.
So what design ideas do web designers use to make such large navigations fit organically into a project? What innovative solutions can be seen across the web?
Indicators
Submenu indicators are small visual cues showing users that there’s a group of additional links available. These might be dots, squares, arrows, or similar subtle symbols. And yes, users are smart enough to understand that these icons or arrows signal a hierarchy. For example: Microsoft, Nvidia, Bahamas, 1c-interes, Walmart, action envelope. Some menus also include a downward-pointing arrow to indicate the presence of a dropdown list.
Sometimes submenu arrows only appear on hover. While this may look nice and animated, it’s not always convenient. The primary task of web design is to provide users with a comfortable and intuitive experience.
Tiny and Unnoticeable
This may drive users crazy, but it’s still widely used: some large dropdown menus have such tiny font sizes and tight line spacing that everything turns into a visual mess. It’s like the designers ran out of canvas space. On the e-commerce site Ozon.ru, the submenu text is so small it feels like the designers tried to cram in too much. Plus, users must click directly on the link text—clicking nearby won’t work.
But if you look at examples like Microsoft or Nvidia, you can click near the menu items, not just on the exact text. So even if the font is small, the surrounding whitespace is fully and wisely utilized, which makes navigation much more user-friendly.
An interesting approach can be seen at clipper round the world, where the menu isn’t large, but the links are spaced generously and become clearly clickable when hovered. Both the text and nearby padding are interactive. A block-style layout allows better use of available space.
Hover Animation
Hover effects let designers skip icons or extra whitespace and clearly indicate that a link opens a submenu. Web designers often use CSS hover effects to highlight links—an excellent idea for clarity and usability. Users appreciate being able to hover over a link and instantly see the available submenu.
Hover animations might include font color changes, underlining, markers, light/shadow effects, or whatever else the designer can imagine.
Examples from royal robbins, thbhotels, dx3webs, luxe, treblecone showcase a variety of styles. Some animate the text, some use icons, highlights, font color changes—even size adjustments. Every web design has its own style, so there’s no need to stick to a black-and-white standard. Regardless, active links should be visibly styled.
And naturally, one of the accent colors in the brand palette often comes in handy. On Nvidia’s website, hovering over menu items turns them from gray to green—gray, black, and green being Nvidia’s signature colors. On AMD’s site, the use of black and white is also well justified, as red, black, and white are AMD’s primary colors.
Instant Reveal
By combining JQuery with CSS3, designers can create stunning and powerful animations for the web. Dropdown menus often use sliding or fading animations within the user’s field of vision. In other words, when hovering over a main menu item, users may see an instant dropdown, a soft slide, or even a fade-in effect that persists as they move the cursor across the menu items. Great examples include Asus, Ozon.ru, Samsung, and Boutique Olympique Lyon. Screenshots don’t do it justice—you’ll have to visit the sites yourself.
But animation should always serve a purpose. That’s why UI/UX designers aim to use it meaningfully—to enhance the interface, catch attention, spark emotion, or delight the eye. But never to slow down site interaction. Animation delays are usually capped at 1.5 seconds; sometimes designers go for 2—but only when justified.
For example, the site CSS Menu Maker features a fast dropdown that lasts only about 300 milliseconds. The animation triggers only when the cursor moves away—this is a perfect example of intuitive, subconscious animation that doesn’t weigh down the design.
The Secret of Mega Menus
So, when thinking about whether or not to use a mega menu—whether it’s trendy or outdated—it helps to visit major corporate sites. Surprisingly, many of them still use mega menus—but in very different ways. Designers aren’t just focused on whether the menu exists, but on how it functions and how it's shaped. Two main strategies help improve its usability and perception.
Tradition and Innovation
Classic, time-tested dropdowns often look bulky and outdated today. That’s why designers tend to keep them short, use light gray text, and small font sizes. Still, the mega menu holds great potential: it can neatly organize a lot of content without cluttering the browser window. On the road to such well-balanced layouts, web designers find ways to enhance this UI element. Innovation and standardization combine to deliver unusual, beautiful, and functional results.
Boutique Olympique Lyon helps visitors navigate the menu even without knowing French, using icons for socks, shirts, shorts, jackets, balls, gloves, flags, slippers, and more.
Gibbston Valley offers a completely different experience with both text-based and illustrated menus. Each submenu item comes with its own image, clearly indicating the content of the section.
Le Slip Français uses a similar idea, but replaces images with icons in a themed visual style reflecting both the store and the country (blue-white-red).
Reservoir-la has an elegant menu that matches the site's overall aesthetic. Despite small font sizes, the text is readable, and the sidebar visuals give clear context for the section. Camelbak takes a similar approach.
The site GSI Outdoors manages to combine every creative approach into one mega menu: it includes promo banners, illustrated links, and traditional text links. It looks fresh and user-friendly.
Two more bold and innovative examples: the Moscow Urban Development and Construction Complex and kremlin.ru. They take different approaches but are both worth exploring.
The first has a mega menu that expands downward into exactly two columns. The animation is slightly longer, making it smooth and noticeable. It’s always in the same spot, fully text-based, yet neat, visual, and easy to understand.
The second example doesn’t use a classic dropdown but instead layers menu rows. Each top-level item has its own sub-items listed horizontally. The W2C Customs Trade Management website follows a similar pattern.
Conclusion
E-commerce platforms, news websites, digital magazines, and content-heavy projects will always prefer mega menus for their extensive capabilities. These menus make it possible to cover all categories and display them in a user-friendly, intuitive format, saving both time and screen space. If the theme allows, adding icons or illustrations can make the menu even more informative.
Yes, mega menus improve site exploration, help users find what they need, and ultimately drive conversions. But they aren’t suitable for mobile platforms, may clash with certain design trends, and can feel overwhelming to some visitors.
Still, when used properly, their functionality is absolutely justified. That’s why you might see just one or two dropdowns—and that’s enough. There are countless ideas for implementation. Mega menus may not be trendy, but they’re often essential.