Mobile Navigation
Mobile-optimized nav patterns: hamburger drawer, bottom tab bar, slide-over panel, full-screen overlay, nested accordion menus, and drill-down — all with working Alpine state inside a phone-width frame.
Each pattern below is shown inside a phone-width frame so its mobile-only behavior — overlay backdrops, full-bleed panels, bottom-anchored bars — reads correctly even on a wide desktop screen. The frame itself (.mn-frame) is a documentation aid, not part of the shipped widget.
1. Hamburger Toggle Drawer
Tapping the hamburger icon slides a left-side panel over the page with a dimmed backdrop. Tapping the backdrop, the close icon, or pressing Escape all close it.
Note x-trap traps focus inside the drawer while open (Alpine Focus plugin, already loaded globally) — required for keyboard and screen-reader users.
2. Bottom Tab Bar
Persistent app-style navigation anchored to the bottom of the viewport — the dominant pattern for primary navigation in commerce and content apps. Tapping a tab swaps the active state and the visible body content.
Recent: sneakers, denim jacket, tote bag
3 items in your cart
3. Slide-Over Panel
Right-anchored panel for secondary, contextual navigation (cart, filters, account menu) rather than primary site navigation — keeps the main nav pattern reserved for the drawer or tab bar above.
Size
Color
Price
4. Full-Screen Overlay Menu
Instead of a partial-width drawer, the menu takes over the entire viewport — gives large nav links room to breathe and suits sites with few top-level sections.
5. Accordion Nested Links
Multi-level category trees expand in place rather than navigating to a new screen — keeps the user oriented within one scrollable menu. Built with Alpine's x-collapse plugin (already loaded globally) for the expand/collapse animation.
6. Back-Button Drill-Down
Instead of expanding in place, tapping a parent category replaces the entire screen with its children — common in App Store-style menus where each level needs full width for icons, descriptions, or images. A path stack drives the back button and breadcrumb-style title.
path is an index stack, not a copy of the data — keeps memory flat regardless of tree depth and makes "back" a simple pop.
7. States
Common states layered on top of the patterns above.
Active tab + notification badge
Disabled link — coming-soon section
Loading — menu data not yet fetched
8. Edge Cases
Inputs that break naive mobile-nav implementations.
Single top-level item — tab bar collapses to one tab, looks broken
A bottom tab bar with only one tab provides no navigation value and wastes vertical space — fall back to a simple top bar instead of rendering a one-item tab bar.
Very long link label in drawer — must wrap, not overflow
Five-level-deep category — drill-down handles it, accordion gets visually noisy
Accordion indentation compounds with each level; past 2–3 levels the back-button drill-down pattern (section 6) reads more clearly than nested indentation.