Each menu type was created to solve a different problem. Choosing the wrong one won’t break your store right away, but it makes shoppers think more than they need to — and every time a shopper has to think, that’s a moment they might leave. This article walks through the most common Shopify menu types, and for each one: what it is, when it fits, when it doesn’t, and the mistakes merchants tend to make.
One figure is worth remembering before the details. According to the Baymard Institute, the average cart abandonment rate in ecommerce is around 70%. Not every loss is down to navigation, but messy navigation plays its part in pushing shoppers away before they ever reach the cart.
The four types below aren’t mutually exclusive. A store often uses several at once — for example, a mega menu on desktop and a tab bar on mobile. The point is to use the right type for the right context.
Mega menu: good for many categories and shoppers browsing on desktop
A mega menu is a large expanding panel. When you hover over or tap a top item, a wide panel opens and shows many subcategories at once, often with images or a featured product. Shoppers get the whole layout of the store in a single glance.
It works well when a store has many categories — say 10 groups or more as a rough threshold — and most shoppers come in on a computer. Industries where buyers like to browse before deciding, such as fashion, cosmetics, home goods, and furniture, tend to suit this style. Shoppers don’t yet know exactly what they want, so laying out many paths in front of them helps.
A mega menu doesn’t fit when a store has few products or most shoppers are on phones. A shop selling ten styles of shirt that opens a huge panel is overkill — it looks empty. And since 79% of Shopify traffic comes from mobile (according to Shopify), a design that only looks good on a wide screen abandons most shoppers.
The most common mistake is cramming in too much. Merchants want to show off everything, so they pile every category and banner into one panel. The result is that shoppers feel overwhelmed and click nothing. Too many choices is as good as no choice at all. Group things tightly, leave whitespace, and highlight only the few things you really want to sell.
Slide menu: good for multi-level categories and shoppers who know what they want
A slide menu (also called a hamburger menu, opened from the three-line icon) slides in from the edge of the screen. It shows categories as a tree — tap a group and its subgroups expand, going several levels deep. It’s a tidy way to fit a complex structure into a narrow space.
A slide menu fits when a store has many category levels and you need a clear hierarchy, especially with a mobile-first mindset. Take an auto parts store: Make › Model › Part type. The slide menu lets shoppers drill down the right branch without loading a new page at each step.
It doesn’t fit when a store is simple. If you only have a few categories, hiding them behind an icon just makes things harder for shoppers. The Nielsen Norman Group has shown that hidden navigation lowers the chance shoppers find the item they need and makes them slower than when the menu is visible.
It helps to understand the nature of it: a slide menu hides information. That makes it well suited to people who already know what they want — they actively open it and head straight for a familiar branch. It’s weaker for browsing, because shoppers see nothing until they tap. If your goal is for shoppers to stumble onto products, a slide menu on its own isn’t enough.
Tab bar: good when most shoppers are on phones
A tab bar is a fixed navigation strip pinned to the bottom of the phone screen, usually holding the 4–5 most important items, such as Home, Categories, Search, Cart, and Account. It’s always visible — no matter how far shoppers scroll, it stays there.
The strength of the tab bar is its position. Steven Hoober’s research on how people hold their phones (over 1,300 real-world observations) found that most mobile actions are done with one thumb, and the bottom-center of the screen is where the thumb reaches most easily — often called the thumb zone. Putting the main actions at the bottom means putting them right where the shopper’s hand is already resting.
A tab bar fits when most traffic comes from phones, which is true for the majority of Shopify stores today. It also keeps the important things — especially the cart — always within a single tap, instead of forcing shoppers to scroll back to the top of the page.
Note that a tab bar has room for very few items. Don’t try to stuff in seven or eight icons; pick the 4–5 most important ones and leave the rest to the slide menu or category pages. Think of the tab bar as a shortcut, not your whole navigation.
FAB: one floating button for one action
A FAB (floating action button) is a round button that floats above the content, meant for one important action — chatting with the shop, viewing the cart, or jumping back to the top of the page. It’s always there but discreet, taking up no real space.
A FAB fits when there’s exactly one thing you want shoppers to be able to do from anywhere. A common example in Vietnam is the Messenger or Zalo chat button floating in the bottom-right corner — a shopper looking at a product who has a question can tap and ask right away, with no hunting around.
The thing to remember: a FAB doesn’t replace a menu. It’s a shortcut for one action, not a home for your whole navigation system. The common mistake is loading it with too much — one button that expands into five or six options, or three or four floating buttons at once covering the content and even blocking the Add to Cart button. At that point the FAB turns from a convenience into an obstacle. One FAB, one purpose.
A few things that apply to all four
Whatever type you choose, these three points always hold.
- Separate your mobile and desktop setup. It’s the same store, but shoppers on the two devices behave differently. A single menu that’s ideal for both usually doesn’t exist; it’s better to use a mega menu on desktop and a tab bar or slide menu on mobile.
- Don’t trade away speed. Google sets good targets for Core Web Vitals at LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1. A beautiful menu that makes the page jump or load slowly does more harm than good. According to Shopify data, an average store installs around 6 apps, so every app you add weighs the page down — being selective matters.
- Don’t let your menu break when you switch themes. If the menu is hardwired into the theme, you have to rebuild it from scratch every time you change the look.
This is also why many people use a separate navigation tool. Navi+ can build all four types above — mega menu, slide menu, tab bar, FAB, and a grid menu — by drag and drop, no code, with mobile and desktop configured separately, and the menu stays intact when you switch themes. The tool is also built so it won’t drag down your Core Web Vitals. But whatever tool you use, the principle stays the same: choose your menu type based on your shoppers’ devices and how they buy, not on whichever one looks flashiest.
This article is part of the larger guide on How to choose the right menu type for your Shopify store.