In the rare case your website is still being navigated by human agents (i.e. beings) and not just AI agents, it's worth paying attention here... ;)
Mega menus are good at making a large site feel smaller. Instead of asking people to open one submenu after another, they show the breadth of the site in one view. That is also why NN/g recommends mega menus for sites with many options: people can see, compare and choose without having to remember what was hidden in the previous menu.
But what happens when the screen gets smaller?
The common answer is to replace the mega menu with a traditional mobile menu using expandable panels or accordions. That works, but it often brings back the very problem the mega menu solved: more taps, less overview and a lot of moving back and forth ("pogo-sticking").
My small experiment was to keep the useful part of the mega menu from desktop — the overview and quick access to subpages — and make it work on mobile – as a pattern I have affectionately called a Mobile Mini Mega Menu.
It started with this original design, a design I have encountered "in the wild", featuring the potentially cumbersome expandable panels (not bad as such, but it adds unneccessary taps):
Then I made my mega menu version:
Both contain the same kind of deep navigation, but my version explores a more compact, scannable way to expose the hierarchy on a small screen, while still considering the "fat finger problem" on mobile touch.
The idea is not that every mobile navigation should become a mega menu. If a site has only a few destinations, a small list is still simpler. But when there are multiple categories and subpages, preserving the overview can be more helpful and efficient than hiding every detail behind layers of panels or accordions.
That said, this proposed mobile mega menu pattern obviously isn't perfect, in particular at scale, i.e. if you have a really big information hierarchy with a lot of main pages and multiple levels of subpages.
But in that case, you may have others issues and should perhaps consider revisiting your general information architecture to try to simplify the structure.
Another point to make here is the widespread lack of you-are-here indicators in real-life navigation design. Thus to demonstrate their usefulness in aiding user orientation, I have added them to my version, using orange underlines, dots and bold text – and the current page always being visible in the topbar.
So, when the information architecture is quite large but the viewport is small, consider the four M's in navigation design: Mobile Mini Mega Menu.
I have used the AI-tool Claude Design to prototype both cases for you to try:
Related: Trying to remove levels of nested, expandable panels can be a useful design technique, as I have demonstrated in this case.
By the way, if you need help with your site or app navigation – or UX/UI design in general, I'm available.
Let's get in touch.