CrittrHavensCrittrHavens

Basic Navigation Guide 🧭

Moving around CrittrHavens feels natural once you know the patterns. This guide shows you how to navigate like a pro, whether you're on mobile or desktop.

CrittrHavens uses familiar patterns that just make sense. Once you learn these basics, you'll flow through the app effortlessly.

The Bottom Navigation Bar

Your main compass sits at the bottom for easy access:

The Five Main Sections:

  1. 🏠 Havens - Your workspace dashboard
  2. 💚 Care - Pet management and logging
  3. 📋 Tasks - Scheduled activities
  4. 📦 Inventory - Supply tracking
  5. ⋯ Extras - Settings and additional features

Visual Feedback:

  • Active section highlights in your theme color
  • Tap feedback with subtle animations
  • Badge numbers for important alerts
  • Large touch targets for mobile ease

Understanding the app structure helps you move efficiently:

CrittrHavens
├── Havens (Main Dashboard)
│   ├── Haven List
│   ├── Haven Details
│   └── Habitat Management
├── Care (Pet Hub)
│   ├── Crittrs List
│   ├── Pet Profiles
│   └── Care Logs
├── Tasks (Scheduling)
│   ├── Today's Tasks
│   ├── Upcoming
│   └── Overdue
├── Inventory (Supplies)
│   ├── Equipment
│   └── Consumables
└── Extras (More)
    ├── Settings
    ├── Reports
    └── Help

Moving Between Sections

Switching sections is instant. No loading screens, no delays.

Direct Navigation

Tap any bottom nav icon to jump directly:

  • Single Tap: Goes to section's main page
  • Double Tap: Scrolls to top if already there
  • Long Press: Shows section preview (iOS only)

Back Navigation

Getting back is always simple:

  • Browser Back: Works as expected
  • Swipe Right: iOS gesture to go back
  • Back Arrows: Consistent placement in headers
  • Breadcrumbs: Shows your current path

Page-Specific Navigation

Each section has its own navigation patterns. Here's what to expect.

Haven Navigation

Moving through your workspaces:

  1. Haven List: See all your havens at once
  2. Click a Haven: Opens its habitat grid
  3. Edit Mode Toggle: Switch to customization
  4. Habitat Details: Click any habitat for info
  5. Drag & Drop: Reposition in edit mode

Quick Actions: Three-dot menus for fast access to common tasks.

Care Section Navigation

Managing your pets efficiently:

  1. Tab Bar: Switch between Crittrs, Plants, and Logs
  2. List View: Scroll through all items
  3. Search Bar: Filter as you type
  4. Detail Pages: Tap any item for full info
  5. Action Buttons: Float for easy access

Smart Filtering: Use chips to narrow results instantly.

Task Navigation

Stay on top of care schedules:

  1. Time Filters: Today, This Week, All
  2. Status Tabs: Overdue, Due Soon, Upcoming
  3. Task Details: Tap for full information
  4. Quick Complete: Checkbox for instant marking
  5. Bulk Actions: Select multiple tasks

Inventory Navigation

Track supplies smoothly:

  1. Category Tabs: Equipment, Consumables
  2. Stock Status: Visual indicators for levels
  3. Search Function: Find items quickly
  4. Detail Views: Full item information
  5. Quick Add: Plus button always visible

Search and Filtering

Finding what you need should be instant. Our search tools make it happen.

Universal Search Patterns

These work everywhere:

  • Type to Search: Instant results as you type
  • Clear Button: X to reset search
  • Recent Searches: Quick access to history
  • No Results State: Clear messaging

Filter Controls

Narrow your view with:

  • Filter Chips: Tap to toggle on/off
  • Multi-Select: Combine multiple filters
  • Sort Options: Name, date, priority
  • Reset All: Clear everything at once

Smart Suggestions

The app learns your patterns:

  • Frequent Actions: Appear first
  • Recent Items: Quick access
  • Related Content: Contextual suggestions

Mobile Gestures

These gestures make mobile navigation feel fluid.

Standard Gestures

Works across all screens:

  • Swipe Right: Go back (iOS)
  • Swipe Down: Refresh content
  • Pinch: Zoom haven grids
  • Long Press: Context menus
  • Double Tap: Quick actions

List Interactions

In any list view:

  • Swipe Left: Reveal actions (delete, edit)
  • Pull to Refresh: Update data
  • Infinite Scroll: Auto-load more items
  • Tap and Hold: Multi-select mode

Keyboard Navigation

Using a keyboard? These shortcuts speed things up.

Global Shortcuts

Available anywhere:

  • Tab: Move between fields
  • Enter: Confirm actions
  • Escape: Close modals
  • Arrow Keys: Navigate lists

Form Navigation

In any form:

  • Tab/Shift+Tab: Forward/backward
  • Enter: Submit form
  • Escape: Cancel without saving
  • Space: Toggle checkboxes

Popups and forms follow consistent patterns.

Opening Modals

Triggered by:

  • Plus Buttons: Create new items
  • Edit Actions: Modify existing
  • Detail Views: See more info
  • Settings: Configure options

Closing Modals

Multiple ways to dismiss:

  • X Button: Top right corner
  • Cancel Button: Bottom of form
  • Escape Key: Keyboard shortcut
  • Outside Click: Tap backdrop
  • Swipe Down: Gesture dismiss

Never lose track of where you are.

Path Indicators

Shows your location:

  • Section > Subsection > Page
  • Clickable Links: Jump to any level
  • Current Page: Bold or highlighted
  • Home Link: Always returns to start

Error States and Recovery

Hit a dead end? Here's how to recover.

Common Error Patterns

What you'll see:

  • Empty States: Clear instructions when no data
  • 404 Pages: Friendly "not found" messages
  • Network Errors: Retry options available
  • Permission Errors: Clear explanations

Recovery Actions

Getting back on track:

  • Retry Buttons: Try failed actions again
  • Go Home: Return to main dashboard
  • Contact Support: Direct help links
  • Offline Mode: Limited functionality

Accessibility Features

Navigation for everyone.

Screen Reader Support

  • ARIA Labels: Clear descriptions
  • Focus Management: Logical tab order
  • Announcements: Status updates
  • Skip Links: Jump to main content

Visual Aids

  • High Contrast: Better visibility
  • Focus Indicators: Clear selection
  • Large Touch Targets: Easy tapping
  • Consistent Icons: Universal meanings

Performance Tips

Navigate faster with these tricks.

Speed Optimizations

  • Preloading: Next pages load early
  • Caching: Recent pages stay fast
  • Lazy Loading: Images load as needed
  • Instant Feedback: No waiting for actions

Data Management

  • Auto-Save: Changes save continuously
  • Offline Queue: Actions sync when online
  • Background Sync: Updates while you work

Common Navigation Scenarios

Real-world navigation examples.

Scenario: Check morning tasks

  1. Open app → lands on Havens
  2. Tap Tasks in bottom nav
  3. View "Today" filter (default)
  4. Complete tasks with checkboxes
  5. Return to Havens with one tap

Scenario: Log a feeding

  1. Navigate to Care section
  2. Find your crittr in list
  3. Tap three-dot menu
  4. Select "Log Feeding"
  5. Fill form and save
  6. Auto-return to Care list

Scenario: Check low inventory

  1. See badge on Inventory tab
  2. Tap to view Inventory
  3. "Low Stock" filter auto-applied
  4. Tap item for details
  5. Use quick reorder action

Stuck? These tips help.

Can't find something?

  • Use the search bar
  • Check different sections
  • Try removing filters

Lost your place?

  • Check breadcrumbs
  • Use browser back
  • Go to home (Havens)

Page won't load?

  • Pull to refresh
  • Check connection
  • Try again later

Pro Navigation Tips

Level up your navigation game.

  • Learn the Icons: Memorize for faster navigation
  • Use Search: Often faster than browsing
  • Bookmark Sections: Browser bookmarks work
  • Master Gestures: Practice makes perfect
  • Customize Order: Settings > Navigation (coming soon)

Next Steps

Ready to start managing your pets?

Navigation mastered! You're ready to explore every corner of CrittrHavens with confidence. 🗺️✨