A desktop mega menu displays all subcategories in a wide multi-column panel. This layout depends on two things phones don’t have: width and hover. On a 375-pixel-wide screen, a multi-column layout compresses into an unreadable mess. Without hover, the interaction model needs to change entirely.
Translating a mega menu to mobile doesn’t mean shrinking it. It means reimagining the same content for a different interaction model.
Slide menu with progressive disclosure
The most common and effective mobile translation. The mega menu’s top-level categories become a list in a slide panel. Tapping a category slides to a new screen showing that category’s subcategories (matching one column of the desktop mega menu). Tapping a subcategory either slides deeper or navigates to the collection page.
This pattern preserves the mega menu’s hierarchy — the shopper navigates the same category structure — but presents it one level at a time. Instead of seeing all columns at once (which doesn’t fit on mobile), they see one “column” per screen.
A back button or left swipe returns to the previous level. The shopper always knows where they are in the hierarchy because each screen shows only the current level’s options.
Accordion pattern
An alternative to sliding: the accordion pattern expands subcategories in place. The shopper taps a category heading, and its subcategories appear below it (pushing other categories down). Tapping again collapses the section.
The accordion keeps the full menu visible, which helps shoppers who want to compare categories at the same level. But it can make the menu very long — if multiple categories are expanded simultaneously, the shopper is scrolling through a packed list.
For mega menus with many subcategories, the accordion pattern becomes unwieldy. A category with 15 subcategories expands into a long block that pushes everything below it off screen. The slide pattern handles this better because each level gets its own screen.
Images on mobile
The mega menu’s desktop images (category photos, featured products) may or may not translate to mobile. On a narrow screen, a large hero image for each category takes up space that could show more navigation links.
The practical approach: keep one hero image at the top of each category’s mobile screen (if the image adds value), and remove the smaller category images that appeared in the desktop columns. The slide menu’s narrower format naturally limits how many images fit comfortably.
Featured products can work on mobile as a horizontal scroll below the subcategory list — a row of product cards the shopper can swipe through. This is less prominent than on desktop but still provides product discovery within the menu.
Triggering the mobile mega menu
On desktop, the mega menu opens on hover over a header category. On mobile, it needs a tap trigger. The two most common options:
Hamburger icon in the header. The traditional approach. The shopper taps the three-line icon, and the full mobile menu (slide or accordion) opens. The hamburger’s problem: it’s at the top of the screen, in the hard-to-reach thumb zone.
Categories button in the tabbar. The mobile-first approach. A dedicated “Categories” button in the bottom tabbar opens the mobile menu. This puts the trigger in the thumb zone, making it faster and more comfortable to access.
With Navi+, the desktop mega menu and mobile slide menu share the same underlying category structure but use different triggers and layouts. The desktop version opens on hover from the header. The mobile version opens from the tabbar’s Categories button, in a slide panel optimized for touch.
This article is part of the larger guide on Mega menu best practices: layout, images, and how much is too much.