Mobile Navigation Guide
Learn how navigation works on mobile devices and how to optimize the mobile experience.
Overview
Cravo automatically adapts your navigation for mobile devices. No extra configuration needed – your site works beautifully on phones and tablets out of the box.
Mobile Navigation Features
Unified Drawer
On mobile, all navigation elements combine into a single drawer:
- Hamburger menu – Opens the navigation drawer
- Top Menu items – Displayed in the drawer
- Side Menu – Included if enabled
- Breadcrumbs – Remain visible above content
📸 PLACEHOLDER: Screenshot
Mobile view showing the hamburger menu and opened navigation drawer.
Drill-Down Pattern
For sites with deep hierarchies, the Side Menu uses a drill-down pattern:
- User taps a section to expand it
- Child pages appear below
- Tapping a child page opens it
- Back button returns to parent
This pattern keeps navigation clean while supporting complex structures.
📸 PLACEHOLDER: Screenshot
Mobile sidebar showing drill-down navigation with expanded section.
Responsive Breakpoints
Cravo switches to mobile navigation at these widths:
| Breakpoint | Navigation Mode |
|---|---|
| ≥ 1024px | Desktop (full sidebar) |
| 768-1023px | Tablet (collapsible sidebar) |
| < 768px | Mobile (drawer navigation) |
Mobile-Friendly Tips
- Keep menu items short – Long labels get truncated
- Limit nesting depth – 2-3 levels work best on mobile
- Test on real devices – Use your phone to test navigation
- Consider touch targets – Ensure links are easy to tap
Breadcrumbs on Mobile
On mobile, breadcrumbs:
- Show only the current page and parent
- Are horizontally scrollable if too wide
- Help users understand their location
Testing Mobile Navigation
Use your browser's developer tools:
- Open your site
- Press
F12or right-click → Inspect - Click the device toggle icon
- Select a mobile device size
- Test your navigation
💡 TIP
Nothing beats testing on a real device. Open your site on your phone!
What's Next?
- Setting Up Navigation – Configure desktop navigation
- Adding Breadcrumbs – Enable breadcrumb navigation
Need help? Contact us at support@cravo.life
