Overview
This article catalogs eight distinct mobile navigation patterns, illustrated as a low-resolution infographic that strips away branding and content to focus purely on functional placement and geometry. Each pattern offers a unique trade-off between discoverability, screen real estate, and ergonomic reach.
“The best navigation is the one the user doesn't have to think about — but the designer must think about everything.”
Rather than prescribing a single "correct" approach, the patterns below are presented as an architectural palette. Choosing the right one depends on content density, frequency of navigation, thumb-reach zones, and platform conventions.
Pattern Overview
Each card below corresponds to a wireframe phone showing the navigation placement.
Pattern Details
Card
A grid of tappable cards serving as navigation hubs. Works well for dashboard-style entry points.
Drawer
Sidebar slides in from the left. Keeps the main view uncluttered; familiar from Material Design.
Tab Bar
Persistent bottom bar with iconic shortcuts. Industry standard for apps with 3–5 top-level sections.
Full
Overlay that consumes the entire screen. Useful for immersive, temporary navigation contexts.
Sheet
Bottom panel slides upward. Ideal for actions and settings that need more room than a popover.
Three Dots
The overflow menu (often called "more" or "kebab" menu). Saves space for less-frequent actions.
Rectangle
A condensed vertical strip on the side. A space-efficient variant of the drawer pattern.
Bubble
A floating action button (FAB) or chat-head-style bubble. Best for a single primary action.
Comparative Analysis
What makes this particular infographic — and by extension this article — unique is its deliberate abstraction. By rendering each pattern as a high-contrast, monochrome wireframe (blue, white, grey), the viewer's attention is forced onto geometry and placement rather than branding or visual polish.
Key Dimensions for Comparison
- Screen Coverage — How much of the viewport does the navigation occupy? (Tab bars and bubbles use minimal space; full overlays use all of it.)
- Persistence — Is the navigation always visible (Tab Bar) or summoned on demand (Drawer, Three Dots)?
- Thumb Zone — Are targets in the easy-to-reach bottom and center areas (Sheet, Tab Bar) or do they require a stretch (Rectangle, Drawer)?
- Content Priority — Does the pattern maximize content area (Bubble, Three Dots) or sacrifice it for navigation visibility (Card, Tab Bar)?
When to Use Each
| Pattern | Best For | Content Loss |
|---|---|---|
| Card | Dashboards, portals | Moderate |
| Drawer | Deep content hierarchies | Low (temporary) |
| Tab Bar | 3–5 top-level sections | Low (persistent) |
| Full | Immersive menus, games | High (temporary) |
| Sheet | Actions, filters, settings | Moderate (temporary) |
| Three Dots | Overflow / secondary actions | Negligible |
| Rectangle | Condensed navigation | Low (temporary) |
| Bubble | Single primary action | Negligible |
Design Vocabulary
A key contribution of this kind of visual reference is nomenclature. By assigning specific names — "Drawer", "Sheet", "Bubble" — the infographic gives designers and developers a shared vocabulary. Saying "Let's use a bottom sheet for the filter panel" is far more precise than "Let's put a thing that slides up from the bottom."
This shared language reduces ambiguity in design handoffs, sprint planning, and code reviews.
It also maps directly to platform SDK components: DrawerLayout (Android),
UISheetPresentationController (iOS), BottomNavigation (Material),
and so on.
// Conceptual mapping "Card" → UICollectionView / RecyclerView grid "Drawer" → DrawerLayout / SideMenu "Tab Bar" → UITabBar / BottomNavigation "Full" → UIPageViewController overlay "Sheet" → UISheetPresentationController "Dots" → UIMenu / PopupMenu "Rect" → custom sidebar strip "Bubble" → FAB / floating action button
Resources & Further Reading
- Material Design 3 — Navigation components guidelines (Navigation Bar, Navigation Drawer, Navigation Rail)
- Apple HIG — Bars (Tab Bars, Toolbars), Sheets, Popovers
- Laws of UX — Fitts's Law, Hick's Law, and Jakob's Law as they apply to navigation
- Mobile First — Luke Wroblewski's philosophy on designing for small screens first