Setting Up Navigation (Top Menu & Sidebar)
Learn how to configure your site's navigation menus including Top Menu, Side Menu, and Breadcrumbs.
Overview
Cravo offers three navigation types that work together to help visitors explore your site:
- Top Menu (Navbar) – Primary horizontal navigation at the top of your site
- Side Menu (Sidebar) – Contextual vertical navigation for deep content hierarchies
- Breadcrumb – Path-based navigation showing the current page location
You can enable or disable each menu independently based on your site's needs.
Accessing Navigation Settings
- Go to your Dashboard
- Click on your site card
- Navigate to Content → Menus
📸 PLACEHOLDER: Screenshot
Navigation settings page showing three menu cards (Top Menu, Side Menu, Breadcrumb) with toggle switches.
Top Menu (Navbar)
The Top Menu is the primary navigation bar displayed at the top of every page.
Enabling the Top Menu
- On the Menus page, locate the Top Menu card
- Toggle the switch to ON
- The card becomes clickable – click to access detailed settings
- Click Save Changes
Configuring Top Menu Items
Once enabled, click the Top Menu card to customize:
- Add Menu Items – Link to pages within your site
- Reorder Items – Drag and drop to change order
- Edit Labels – Customize how each link appears
📸 PLACEHOLDER: Screenshot
Top Menu configuration page showing menu items list with drag handles and edit options.
Side Menu (Sidebar)
The Side Menu provides contextual navigation, perfect for documentation sites with deep page hierarchies.
Enabling the Side Menu
- On the Menus page, locate the Side Menu card
- Toggle the switch to ON
- Click the card to access sidebar configuration
- Save your changes
How the Side Menu Works
The Side Menu automatically displays nested pages based on your Craft document structure. It supports:
- Multi-root navigation – Top-level pages become sidebar roots
- Expandable sections – Nested pages collapse/expand
- Active state highlighting – Current page is visually indicated
📸 PLACEHOLDER: Screenshot
A live site showing the Side Menu with expanded sections and the current page highlighted.
Breadcrumb Navigation
Breadcrumbs show the path from the homepage to the current page, helping users understand where they are.
Enabling Breadcrumbs
- On the Menus page, locate the Breadcrumb card
- Toggle the switch to ON
- Click the card to configure breadcrumb options
- Save your changes
Breadcrumb Features
- Home anchor – Shows your logo or site name as the starting point
- Path display – Shows parent pages leading to current page
- Clickable links – Each breadcrumb segment links to that page
📸 PLACEHOLDER: Screenshot
Breadcrumb bar showing: Home > Guides > Getting Started > Current Page
Mobile Navigation
On mobile devices, Cravo automatically transforms your navigation into a mobile-friendly drawer:
- Top Menu becomes a hamburger menu
- Side Menu uses a drill-down pattern
- Breadcrumbs remain visible but condensed
💡 TIP
Test your site on mobile to ensure navigation works smoothly for all visitors.
Best Practices
- Keep Top Menu simple – Limit to 5-7 main items
- Use Side Menu for docs – Great for hierarchical content
- Enable Breadcrumbs – Especially helpful for deep sites
- Test all menu combinations – Some combinations work better than others
Common Configurations
| Site Type | Top Menu | Side Menu | Breadcrumb |
|---|---|---|---|
| Blog | ✅ ON | ❌ OFF | ❌ OFF |
| Documentation | ✅ ON | ✅ ON | ✅ ON |
| Portfolio | ✅ ON | ❌ OFF | ❌ OFF |
| Landing Page | ✅ ON | ❌ OFF | ❌ OFF |
What's Next?
- Customizing Your Site Design – Brand colors and typography
- Adding Breadcrumbs – Detailed breadcrumb configuration
Need help? Contact us at support@cravo.life
