Mobile menu patterns
The mobile menu is the smallest surface that has to carry the whole information architecture. The decision between overlay, sheet, and tab bar shapes how shoppers move between primary destinations on every page.
Full-screen overlay with fades
A modal that takes the entire viewport, fading in over the page beneath. Categories stack vertically with generous spacing and progressive opacity. Used by brand-led retailers where the menu is a deliberate moment, not utility chrome.
> what's good
- +Removes every other distraction, the menu is the entire surface.
- +Plenty of room for typographic hierarchy and brand voice.
- +Easy to add secondary actions like locale switcher and account at the bottom.
> what's risky
- ·Heavy gesture, modal-mode trips up some accessibility tools.
- ·Easy to over-design and lose findability under typography flourishes.
- ·Closing animation can feel slow on mid-range devices.
Bottom-sheet drawer
A drawer that slides up from the bottom edge with a handle affordance, covering roughly half the viewport. Categories stack inside the sheet with a scrim dimming the page. Common on DTC brands and content-led commerce where context behind the menu matters.
> what's good
- +Keeps page context partially visible, easier to back out without losing place.
- +Bottom-anchored UI sits within natural thumb reach on phones.
- +Handle affordance teaches dismiss-by-swipe without an explicit close button.
> what's risky
- ·Half-height sheet is cramped for catalogues with more than 6-8 top-level categories.
- ·Iframe and PWA quirks make swipe-to-dismiss inconsistent across browsers.
- ·Shoppers who expect a hamburger overlay can miss the bottom-up motion.
Persistent bottom tab bar
A native-app-style tab bar pinned to the bottom of the viewport with 4-5 primary destinations. Replaces or supplements a hamburger menu. Common on grocery, food delivery, and marketplace apps where shoppers return to the same handful of surfaces.
> what's good
- +Primary destinations stay one tap away on every screen.
- +Cart badge is always visible, reinforcing pending purchase intent.
- +Maps cleanly to native apps if you have parallel iOS and Android builds.
> what's risky
- ·Eats permanent vertical space on small phones, hurting feed readability.
- ·Forces a brutal IA decision, only 4-5 things can be top-level.
- ·Conflicts with iOS Safari home indicator and tab UI on some devices.