diff --git a/.vscode/settings.json b/.vscode/settings.json
index 013a244..96ccb8b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,5 +10,16 @@
         ".specify/scripts/bash/": true,
         ".specify/scripts/powershell/": true
     },
-    "terminal.integrated.cwd": "${workspaceFolder}/src"
+    "terminal.integrated.cwd": "${workspaceFolder}/src",
+    "python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python",
+    "python.terminal.activateEnvironment": true,
+    "python.testing.unittestEnabled": true,
+    "python.testing.unittestArgs": [
+        "-v",
+        "-s",
+        ".",
+        "-p",
+        "test*.py"
+    ],
+    "python.testing.cwd": "${workspaceFolder}/src"
 }
diff --git a/AGENTS.md b/AGENTS.md
index 2b9d836..55bcf01 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -51,6 +51,13 @@ class HeadingBlock(blocks.StructBlock):
 
 **Security**: Use `EmbedBlock` (oEmbed) for embedded content, NEVER `RawHTMLBlock` (XSS risk).
 
+**Navigation Menu Pattern**: See `src/navigation/blocks.py` for nested block structure that enforces 2-level maximum:
+- `TopLevelMenuBlock` (StreamBlock) contains page_link, external_link, OR dropdown
+- `DropdownMenuBlock` (StructBlock) contains title and items (MenuItemBlock)
+- `MenuItemBlock` (StreamBlock) contains ONLY page_link and external_link (no nested dropdowns)
+
+This structural approach prevents 3+ level nesting at the schema level.
+
 ### 4. Translation & Locale Management
 
 - Translation UI comes from `wagtail.contrib.simple_translation` (already installed)
@@ -62,22 +69,42 @@ class HeadingBlock(blocks.StructBlock):
 
 ## Development Workflow
 
-### Essential Commands (from `src/` directory)
+### Essential Commands
+
+**IMPORTANT**: This project uses `uv` for package management. When running Python commands in terminals (especially from AI assistants or automated tools), the virtual environment may not be automatically activated. **Always prefix Python commands with `uv run`** to ensure the correct environment is used:
+
+```bash
+# ✅ CORRECT - Use uv run for all Python commands
+uv run python manage.py test
+uv run python manage.py migrate
+uv run python manage.py runserver
+
+# ❌ WRONG - May fail if virtual environment isn't activated
+python manage.py test
+```
+
+#### Package Management (from project root)
 
 ```bash
-# Package management (from project root)
 uv sync                    # Install all deps (creates .venv/)
 uv add package-name        # Add runtime dependency
 uv add --dev package-name  # Add dev dependency
+```
+
+#### Django Commands (from src/ directory)
 
-# Django (from src/ directory)
+```bash
 cd src
-python manage.py migrate
-python manage.py test                    # Run all tests (64 total)
-python manage.py test locales.tests      # Run specific app tests
-python manage.py createsuperuser         # One-time setup
+uv run python manage.py migrate
+uv run python manage.py test                    # Run all tests
+uv run python manage.py test navigation         # Run specific app tests
+uv run python manage.py createsuperuser         # One-time setup
+uv run python manage.py runserver               # Development server
+```
 
-# Code quality (from project root)
+#### Code Quality (from project root)
+
+```bash
 uv run pre-commit install              # One-time setup
 uv run pre-commit run --all-files      # Manual run
 uv run ruff check --fix .              # Lint with auto-fix
@@ -183,8 +210,9 @@ from core.constants import DEFAULT_LANGUAGE_CODE, DEFAULT_LANGUAGES
 - **curlylint** - Template linting
 
 ### Migration Best Practices
+
 1. Test migrations are auto-generated
-2.  based on model changes
+2. based on model changes
 3. Run `python manage.py makemigrations` after model changes
 4. All StreamField changes require migrations (block structure changes)
 5. Check migration files into version control
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d366e12..10ffc93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- **Navigation Menu System**: Site-wide multi-lingual navigation with WCAG 2.1 AA accessibility
+  - Site-wide navigation menu configuration via Wagtail Settings (BaseSiteSetting pattern)
+  - StreamField-based menu structure with PageLinkBlock, ExternalLinkBlock, and DropdownMenuBlock
+  - **2-level menu maximum**: Enforced at schema level - prevents nested dropdowns
+  - **Locale-aware rendering**: Automatic page translation linking with fallback to default locale
+  - **Full WCAG 2.1 AA compliance**: ARIA menubar pattern, keyboard navigation, screen reader support
+  - **DaisyUI responsive design**: Mobile hamburger drawer, desktop horizontal menu
+  - **Accessibility features**:
+    - Skip link to main content (first focusable element)
+    - ARIA attributes (role, aria-label, aria-current, aria-expanded, aria-haspopup, aria-controls)
+    - 44x44px minimum touch targets for mobile
+    - Visible focus indicators (3:1 contrast ratio)
+    - Progressive enhancement with `<details>`/`<summary>` for dropdowns
+  - **Dropdown edge detection**: JavaScript prevents viewport overflow (opens left/right/down based on space)
+  - **Keyboard support**: Tab, Enter, Space, Escape, Arrow keys for full navigation
+  - **Theme-aware**: Automatic adaptation to light/dark mode via DaisyUI
+  - **7 comprehensive tests**: ModelTests, StreamFieldTests, IntegrationTests for dropdown structure
+  - Developer documentation in `specs/002-nav-menu-system/` (plan, data model, contracts, quickstart)
+  - Template tag: `{% load navigation_tags %}{% navigation_menu %}`
 - **Tailwind CSS Integration**: Modern utility-first CSS framework with DaisyUI components
   - Tailwind CSS v4 with @source directive for automatic template scanning
   - DaisyUI plugin with semantic component classes (buttons, cards, navigation, forms, alerts)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4459ee8..a4a78eb 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -22,16 +22,19 @@ cd QuakerCMS
 ### 2. Install uv (if not already installed)
 
 #### macOS/Linux
+
 ```bash
 curl -LsSf https://astral.sh/uv/install.sh | sh
 ```
 
 #### Windows
+
 ```powershell
 powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
 ```
 
 Alternatively, install via pip:
+
 ```bash
 pip install uv
 ```
@@ -45,6 +48,7 @@ uv sync
 ```
 
 This command will:
+
 - Create a virtual environment in `.venv/`
 - Install all project dependencies
 - Install development dependencies (like `ruff` for linting) automatically
@@ -52,22 +56,26 @@ This command will:
 ### 4. Activate the Virtual Environment
 
 #### macOS/Linux
+
 ```bash
 source .venv/bin/activate
 ```
 
 #### Windows (PowerShell)
+
 ```powershell
 .venv\Scripts\Activate.ps1
 ```
 
 #### Windows (Command Prompt)
+
 ```cmd
 .venv\Scripts\activate.bat
 ```
 
 ### 5. Navigate to the Django Project Directory
 
+
 ```bash
 cd src
 ```
@@ -98,7 +106,47 @@ Start the Django development server:
 python manage.py runserver
 ```
 
-### 9. Access the Site
+### 9. Install Tailwind CSS Dependencies
+
+QuakerCMS uses Tailwind CSS with DaisyUI for styling. You need to install the Node.js dependencies:
+
+```bash
+# Navigate to the Tailwind source directory
+cd theme/static_src
+
+# Install npm dependencies
+npm install
+
+# Return to the src directory
+cd ../..
+```
+
+### 10. Set Up Test Navigation Content (Optional but Recommended)
+
+To quickly set up sample pages and navigation menu for development:
+
+```bash
+# This creates test pages (About, Programs, Contact) and configures the navigation menu
+python manage.py scaffold_navbar_content
+```
+
+This command creates:
+
+- **About** page (top-level)
+- **Programs** page with a dropdown containing:
+  - Programs overview
+  - Adult Education
+  - Youth Programs
+- **FGC Website** external link
+- **Contact** page (top-level)
+
+To reset and recreate the test content:
+
+```bash
+python manage.py scaffold_navbar_content --delete
+```
+
+### 11. Access the Site
 
 Once the server is running, you can access:
 
@@ -127,6 +175,81 @@ Access the site at <http://localhost:8000/>
 
 ## Development Workflow
 
+### Running Development Servers
+
+QuakerCMS requires **two development servers** running simultaneously:
+
+1. **Django development server** - Serves the application
+2. **Tailwind CSS watcher** - Automatically rebuilds CSS when files change
+
+#### Option A: Two Terminal Windows (Recommended)
+
+**Terminal 1 - Django Server:**
+
+```bash
+cd src
+python manage.py runserver
+```
+
+**Terminal 2 - Tailwind CSS Watcher:**
+
+```bash
+cd src/theme/static_src
+npm run dev
+```
+
+This setup provides:
+- ✅ Auto-reload when Python/template files change (Django)
+- ✅ Auto-rebuild CSS when templates/classes change (Tailwind)
+- ✅ Live browser refresh with django-browser-reload (in DEBUG mode)
+
+#### Option B: Single Command (Requires Honcho)
+
+If you have `honcho` installed (part of django-tailwind optional dependencies):
+
+```bash
+cd src
+python manage.py tailwind dev
+```
+
+This runs both servers together, but requires the `honcho` package.
+
+### Navigation Menu Configuration
+
+The navigation menu is configured in **Wagtail Admin → Settings → Navigation Menu**.
+
+#### Quick Setup with Test Data
+
+Use the scaffold command to quickly set up test pages and navigation:
+
+```bash
+# First time setup or when you need fresh test data
+python manage.py scaffold_navbar_content
+
+# Reset existing test data and recreate
+python manage.py scaffold_navbar_content --delete
+
+# Create pages only (skip navigation menu configuration)
+python manage.py scaffold_navbar_content --skip-menu
+```
+
+#### Manual Configuration
+
+To manually configure the navigation menu:
+
+1. Go to **Wagtail Admin** (<http://127.0.0.1:8000/admin/>)
+2. Navigate to **Settings → Navigation Menu**
+3. Add menu items using the StreamField:
+   - **Page Link** - Links to Wagtail pages
+   - **External Link** - Links to external URLs
+   - **Dropdown** - Creates a dropdown with nested items (max 2 levels)
+
+The navigation system automatically:
+- Shows the current page with `aria-current="page"`
+- Links to translated versions in multilingual sites
+- Provides mobile-responsive drawer navigation
+- Ensures WCAG 2.1 AA accessibility compliance
+
 ### Code Quality
 
 This project uses `ruff` for code linting and formatting, along with `pre-commit` hooks to automatically maintain code quality.
@@ -213,10 +336,29 @@ QuakerCMS/
 │   └── pull_request_template.md # PR template
 ├── src/                    # Django project root
 │   ├── core/              # Main Django app with settings
+│   │   ├── settings/      # Settings split by environment (base, dev, production)
+│   │   ├── constants.py   # Shared constants (e.g., language codes)
+│   │   └── templates/     # Core templates (base.html, 404, 500)
 │   ├── home/              # Home page app
+│   ├── content/           # General content pages with StreamField
+│   ├── navigation/        # Navigation menu system
+│   │   ├── blocks.py      # StreamField blocks for menu items
+│   │   ├── models.py      # NavigationMenuSetting model
+│   │   ├── templatetags/  # Template tags for rendering navigation
+│   │   ├── templates/     # Navigation template
+│   │   ├── management/    # Management commands (scaffold_navbar_content)
+│   │   └── README.md      # Navigation system documentation
+│   ├── locales/           # Internationalization settings
 │   ├── search/            # Search functionality
+│   ├── theme/             # Tailwind CSS theme
+│   │   └── static_src/    # Tailwind source files
+│   │       ├── src/
+│   │       │   └── styles.css  # Tailwind configuration
+│   │       ├── package.json    # Node.js dependencies
+│   │       └── postcss.config.js
 │   └── manage.py          # Django management script
 ├── docs/                  # Documentation
+├── specs/                 # Feature specifications and planning
 ├── .pre-commit-config.yaml # Pre-commit hooks configuration
 ├── CHANGELOG.md           # Project changelog
 ├── docker-compose.yml     # Docker development environment
@@ -263,6 +405,109 @@ The project uses GitHub Actions for continuous integration. When you create a pu
 
 All checks must pass before a pull request can be merged. You can view the status of these checks on your pull request page.
 
+## Troubleshooting
+
+### Tailwind CSS Not Working / Styles Missing
+
+**Problem**: Navigation menu or other components appear unstyled.
+
+**Solution**: Make sure the Tailwind CSS watcher is running:
+
+```bash
+cd src/theme/static_src
+npm run dev
+```
+
+If styles are still missing:
+
+```bash
+# Rebuild Tailwind CSS in production mode
+npm run build
+
+# Then hard refresh your browser (Cmd+Shift+R on macOS, Ctrl+Shift+R on Windows/Linux)
+```
+
+### "Skip to main content" Link Always Visible
+
+**Problem**: The accessibility skip link appears all the time instead of only on focus.
+
+**Solution**: The Tailwind CSS watcher needs to be running. The `sr-only` utility class requires compiled CSS:
+
+```bash
+cd src/theme/static_src
+npm run dev
+```
+
+### Navigation Menu Not Appearing
+
+**Problem**: No navigation menu shows on pages.
+
+**Solutions**:
+
+1. **Check if navigation menu is configured**:
+   - Go to Wagtail Admin → Settings → Navigation Menu
+   - Add at least one menu item
+
+2. **Use the scaffold command**:
+   ```bash
+   cd src
+   python manage.py scaffold_navbar_content
+   ```
+
+3. **Check if pages exist**: The menu only shows published pages.
+
+### Page Tree Errors When Creating Pages
+
+**Problem**: Error like `'NoneType' object has no attribute '_inc_path'` when creating pages.
+
+**Solution**: Fix the page tree structure:
+
+```bash
+cd src
+python manage.py fixtree
+```
+
+The `scaffold_navbar_content --delete` command automatically runs this after deletion.
+
+### Database Migration Issues
+
+**Problem**: Errors when running `python manage.py migrate`.
+
+**Solution**:
+
+```bash
+# Check for migration conflicts
+python manage.py makemigrations --check
+
+# If there are unapplied migrations, apply them
+python manage.py migrate
+
+# If you have migration conflicts, you may need to merge migrations
+python manage.py makemigrations --merge
+```
+
+### Import Errors / Module Not Found
+
+**Problem**: `ModuleNotFoundError` when running Django commands.
+
+**Solution**: Make sure your virtual environment is activated:
+
+```bash
+# Activate the virtual environment
+source .venv/bin/activate  # macOS/Linux
+.venv\Scripts\Activate.ps1  # Windows PowerShell
+
+# Verify Django is installed
+python -c "import django; print(django.get_version())"
+```
+
+If Django is not installed:
+
+```bash
+# Reinstall dependencies
+uv sync
+```
+
 ## Getting Help
 
 If you encounter any issues or have questions:
@@ -271,6 +516,72 @@ If you encounter any issues or have questions:
 2. Create a new issue with detailed information about your problem
 3. Reach out to the maintainers
 
+## Quick Reference
+
+### Common Commands
+
+```bash
+# Start Django development server
+cd src
+python manage.py runserver
+
+# Start Tailwind CSS watcher
+cd src/theme/static_src
+npm run dev
+
+# Create test navigation content
+cd src
+python manage.py scaffold_navbar_content
+
+# Reset and recreate test content
+python manage.py scaffold_navbar_content --delete
+
+# Run tests
+cd src
+python manage.py test
+
+# Run linting and formatting
+uv run ruff check --fix .
+uv run ruff format .
+
+# Fix page tree issues
+cd src
+python manage.py fixtree
+
+# Create database migrations
+cd src
+python manage.py makemigrations
+
+# Apply migrations
+python manage.py migrate
+
+# Create superuser
+python manage.py createsuperuser
+```
+
+### Important URLs
+
+- **Main Site**: <http://127.0.0.1:8000/>
+- **Wagtail Admin**: <http://127.0.0.1:8000/admin/>
+- **Navigation Menu Settings**: <http://127.0.0.1:8000/admin/settings/navigation/navigationmenusetting/>
+
+### Key Files
+
+- `src/core/settings/base.py` - Main Django settings
+- `src/core/constants.py` - Shared constants (language codes, etc.)
+- `src/navigation/models.py` - Navigation menu model
+- `src/navigation/templatetags/navigation_tags.py` - Navigation rendering logic
+- `src/theme/static_src/src/styles.css` - Tailwind CSS configuration
+- `pyproject.toml` - Project dependencies and configuration
+
+### Development Tips
+
+1. **Always run both servers** (Django + Tailwind) for development
+2. **Use `scaffold_navbar_content`** to quickly set up test pages
+3. **Run `fixtree`** if you encounter page tree errors
+4. **Hard refresh browser** (Cmd+Shift+R / Ctrl+Shift+R) if CSS changes don't appear
+5. **Check pre-commit hooks** run before commits for code quality
+
 ## License
 
 By contributing to QuakerCMS, you agree that your contributions will be licensed under the AGPL-3.0-or-later license.
diff --git a/README.md b/README.md
index 332fb1d..24e7313 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,10 @@ A specialized content management system designed for Quaker meetings and worship
 
 **Built for the global Quaker community** with translation and localization as first-class features, supporting the international and multilingual nature of Friends worldwide.
 
+## Screenshots
+
+_Coming soon: Screenshots of the navigation system, content editing, and admin interface._
+
 ## Purpose
 
 QuakerCMS provides a standardized platform for Quaker communities to publish and discover important content, fostering connection and continuity within the broader Quaker movement. The system recognizes the unique content types and communication patterns that are central to Quaker spiritual life and community organization.
@@ -25,26 +29,35 @@ We envision a federated network of Quaker websites that can share content with o
 
 ## Key Features
 
+### Currently Implemented
+
+- **📱 Responsive Navigation** - Mobile-friendly menu system with dropdown support
+- **🌍 Multilingual Ready** - Runtime-configurable language support for international communities
+- **♿ Accessibility** - WCAG 2.1 AA compliant with screen reader support
+- **📝 Flexible Content** - Rich text editing with structured content blocks
+- **🎨 Modern Design** - Clean, Quaker-inspired aesthetic with customizable styling
+- **🔍 Search** - Built-in search functionality for finding content
+
 ### Content Types for Quaker Communities
 
-QuakerCMS is designed to handle the specific types of content that Quaker communities regularly publish:
+QuakerCMS is being designed to handle the specific types of content that Quaker communities regularly publish:
 
-- **Epistles** - Formal spiritual letters and communications between meetings, part of the rich tradition of Quaker writings
-- **Minutes** - Records of business meetings and corporate decisions
-- **Announcements** - Community news and updates
-- **Events** - Structured event information with relevant details (time, location, description)
-- **Newsletters** - Regular community publications
-- **Pamphlets** - Educational and spiritual materials
+- **Epistles** - Formal spiritual letters and communications between meetings (Planned)
+- **Minutes** - Records of business meetings and corporate decisions (Planned)
+- **Announcements** - Community news and updates (Planned)
+- **Events** - Structured event information (Planned)
+- **Newsletters** - Regular community publications (Planned)
+- **Pamphlets** - Educational and spiritual materials (Planned)
 
-### Technical Goals
+### Future Roadmap
 
-- **Internationalization First** - Built-in support for 19+ languages with runtime-configurable localization, enabling Quaker communities worldwide to publish content in their native languages
-- **Multi-tenant Architecture** - Single instance can host multiple meetings and worship groups
+- **Multi-tenant Architecture** - Single instance hosting multiple meetings and worship groups
 - **Content Federation** - Meetings can share content with other instances for broader discovery
-- **Standards-Based** - Uses open web standards for content syndication (RSS, Atom)
-- **Mobile-Friendly** - Responsive design that works on all devices
-- **Open Source** - No dependency on proprietary services or software
-- **Simple Management** - Easy-to-use interface for content managers
+- **Content Syndication** - RSS/Atom feeds for content distribution
+- **Advanced Search** - Faceted search with filters for content types, dates, and topics
+- **User Roles & Permissions** - Fine-grained access control for different community roles
+- **Digital Archives** - Historical document preservation and organization
+- **Custom Domains** - Each meeting can use their own domain name
 
 ## Use Cases
 
@@ -88,20 +101,57 @@ QuakerCMS is designed to handle the specific types of content that Quaker commun
 
 ## Getting Started
 
-For information on setting up a development environment or contributing to the project, see our [Contributing Guide](CONTRIBUTING.md).
+### For Contributors
+
+Interested in contributing to QuakerCMS? Our [Contributing Guide](CONTRIBUTING.md) has everything you need:
+
+- Setting up your development environment
+- Running the development servers
+- Creating test content and navigation menus
+- Code quality standards and testing
+- Troubleshooting common issues
+
+### For Site Administrators
+
+Documentation for deploying and administering QuakerCMS instances is coming soon.
+
+### For Content Managers
+
+User guides for creating and managing content are in development.
 
 ## Technology Stack
 
-QuakerCMS is built with:
+QuakerCMS is built with modern, open-source technologies:
+
+- **[Wagtail CMS](https://wagtail.org/)** - Flexible, user-friendly content management
+- **[Django](https://www.djangoproject.com/)** - Robust Python web framework
+- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
+- **[DaisyUI](https://daisyui.com/)** - Accessible component library
 
-- **Python 3.12+** - Modern Python for reliable backend development
-- **Django** - Robust web framework for rapid development
-- **Wagtail CMS** - Flexible content management system with excellent editing experience
-- **uv** - Fast Python package management
+All built on **Python 3.12+** with **[uv](https://docs.astral.sh/uv/)** for fast, reliable package management.
 
 ## Project Status
 
-QuakerCMS is in active development. We are working toward an initial release that will support basic content management for individual meetings, with federation and multi-tenant capabilities planned for future releases.
+**Current Phase**: Active Development (Pre-Alpha)
+
+### Recent Milestones
+
+- ✅ **Navigation System** - Responsive, accessible menu with dropdown support
+- ✅ **Content Structure** - Flexible page building with rich text and structured blocks
+- ✅ **Internationalization** - Runtime-configurable language support
+- ✅ **Modern UI** - Tailwind CSS with DaisyUI components
+
+### Next Up
+
+- 🚧 **Specialized Content Types** - Epistles, Minutes, Events, Announcements
+- 🚧 **User Authentication** - Member login and permissions
+- 🚧 **Search Enhancement** - Improved search with filters and facets
+
+### Timeline
+
+We are working toward a **beta release in Q2 2026** that will support basic content management for individual meetings. Federation and multi-tenant capabilities are planned for future releases.
+
+Want to contribute? See our [Contributing Guide](CONTRIBUTING.md) to get involved!
 
 ## Community
 
diff --git a/specs/002-nav-menu-system/checklists/requirements.md b/specs/002-nav-menu-system/checklists/requirements.md
index 8446092..c2cabaf 100644
--- a/specs/002-nav-menu-system/checklists/requirements.md
+++ b/specs/002-nav-menu-system/checklists/requirements.md
@@ -74,9 +74,9 @@ All checklist items have been validated. The specification has been **enhanced**
    - **Multi-indicator Hover**: Not reliant on color alone (underline, background, border)
 
    **Template Structure**:
-   - **Component-based**: `navigation.html`, `navigation_item.html`, `navigation_dropdown.html`
-   - **Base Integration**: Included in `base.html` for site-wide availability
-   - **Reusable Blocks**: DRY principle for menu item rendering
+   - **Single Template**: `navigation.html` - Complete navigation with mobile drawer, desktop menubar, and dropdowns
+   - **Base Integration**: Included in `base.html` via `{% navigation_menu %}` tag for site-wide availability
+   - **DaisyUI Components**: Uses drawer, navbar, menu, and dropdown-hover components
 
 3. **User Story Enhancement**: Added **User Story 4 - Accessible Navigation** (Priority P1) with 12 acceptance scenarios covering:
    - Keyboard-only navigation
diff --git a/specs/002-nav-menu-system/plan.md b/specs/002-nav-menu-system/plan.md
index 44014dd..706c360 100644
--- a/specs/002-nav-menu-system/plan.md
+++ b/specs/002-nav-menu-system/plan.md
@@ -101,18 +101,16 @@ src/
 │   ├── admin.py        # Admin customization (if needed)
 │   ├── blocks.py       # Menu item StreamField blocks
 │   ├── tests.py        # Comprehensive test suite
+│   ├── templatetags/
+│   │   └── navigation_tags.py  # Template tag for rendering menu
 │   ├── migrations/
 │   │   └── 0001_initial.py
 │   └── templates/
 │       └── navigation/
-│           ├── navigation.html          # Main nav component
-│           ├── navigation_item.html     # Simple link block
-│           └── navigation_dropdown.html # Dropdown menu block
+│           └── navigation.html  # Complete navigation template (mobile + desktop)
 ├── core/
 │   ├── templates/
-│   │   ├── base.html   # MODIFIED: Include navigation component
-│   │   └── components/
-│   │       └── navigation.html  # May be moved here from navigation app
+│   │   └── base.html   # MODIFIED: Include navigation_menu tag
 │   └── settings/
 │       └── base.py     # MODIFIED: Add 'navigation' to INSTALLED_APPS
 └── theme/
diff --git a/specs/002-nav-menu-system/spec.md b/specs/002-nav-menu-system/spec.md
index 694cce3..cb2e0df 100644
--- a/specs/002-nav-menu-system/spec.md
+++ b/specs/002-nav-menu-system/spec.md
@@ -9,12 +9,18 @@
 
 ### Session 2025-10-26
 
-- Q: For mobile devices (< 1024px), what UX pattern should the hamburger menu use when opened? → A: DaisyUI drawer component that slides in from left side
-- Q: How should dropdown menus open on desktop devices? → A: Hover on desktop (≥1024px), click/tap on all devices
+- Q: For mobile devices (mobile/tablet breakpoints: `< lg` / < 1024px), what UX pattern should the hamburger menu use when opened? → A: DaisyUI drawer component that slides in from left side
+- Q: How should dropdown menus open on desktop devices? → A: Hover on desktop breakpoint (`lg+` / ≥1024px), click/tap on all devices
 - Q: How should dropdown menus behave inside the mobile hamburger drawer? → A: Accordion-style expansion within drawer (submenus expand in-place below parent item)
 - Q: When a page linked in a menu is deleted, how should the system handle that menu item? → A: Automatically remove from menu immediately when page is deleted (or prevent deletion to preserve referential integrity)
 - Q: When the navigation menu has no menu items configured, how should it render on the front-end? → A: Hide `<nav>` element entirely (do not render navigation section at all)
 
+### Session 2025-11-03
+
+- Q: Should the navigation menu implement caching to reduce database load? → A: Yes - use database cache (1-hour TTL, invalidate on menu save)
+- Q: Should the navigation menu implement error logging and monitoring? → A: Yes - Django logging (ERROR level to console + file)
+- Q: Should the system enforce a maximum total number of menu items? → A: Soft limit (100 items total) - show admin warning when approaching limit, allow override for edge cases
+
 ## Design Philosophy
 
 This feature prioritizes **simplicity over flexibility** to serve Quaker meetings and worship groups who need to focus on content rather than technical configuration. Unlike WordPress's multi-menu system, QuakerCMS provides a single, site-wide navigation menu that covers the primary use case without requiring users to understand concepts like "menu locations" or "menu assignment." This intentional constraint reduces cognitive load and administrative overhead while still delivering full multi-lingual support and nested menu capabilities.
@@ -140,13 +146,30 @@ As a visitor using assistive technology (screen reader, keyboard-only, or mobile
 - What happens if JavaScript is disabled? (Navigation remains functional using `<details>`/`<summary>` elements for progressive enhancement)
 - How does dark mode affect menu styling? (Menu uses DaisyUI theme-aware classes like `bg-base-100` that automatically adapt to theme)
 - How is the current page indicated in the menu? (Active menu item receives `aria-current="page"` attribute and visual styling via CSS)
-- What happens on mobile devices with small screens? (Navigation collapses to hamburger menu at < 1024px breakpoint using DaisyUI responsive classes)
+- What happens on mobile/tablet breakpoints? (Navigation collapses to hamburger menu at mobile/tablet breakpoints `< lg` / < 1024px using DaisyUI responsive classes)
 - How are touch targets sized for mobile accessibility? (All interactive elements have minimum 44x44 pixel touch targets per WCAG guidelines)
 - How do screen readers announce dropdown menus? (Dropdown triggers use `aria-haspopup="true"` and submenus have `aria-labelledby` for proper context)
 - What if a color-blind user can't distinguish hover states? (Hover/focus states use multiple visual indicators: underline, background color, and border changes - not color alone)
 
 ## Requirements *(mandatory)*
 
+### Responsive Breakpoints
+
+The navigation menu system uses standard Tailwind CSS / DaisyUI breakpoints for responsive behavior:
+
+| Breakpoint | Name           | Screen Width   | Typical Devices                        | Navigation Behavior                       |
+| ---------- | -------------- | -------------- | -------------------------------------- | ----------------------------------------- |
+| `sm`       | Mobile (Small) | < 640px        | Phones (portrait)                      | Hamburger menu (drawer)                   |
+| `md`       | Tablet         | 640px - 1023px | Phones (landscape), small tablets      | Hamburger menu (drawer)                   |
+| `lg`       | Laptop/Desktop | ≥ 1024px       | Tablets (landscape), laptops, desktops | Full horizontal menu with hover dropdowns |
+| `xl`       | Wide Desktop   | ≥ 1280px       | Large desktops                         | Full horizontal menu with hover dropdowns |
+| `2xl`      | Ultra-wide     | ≥ 1536px       | Ultra-wide monitors                    | Full horizontal menu with hover dropdowns |
+
+**Breakpoint Usage**:
+
+- **Mobile/Tablet (`< lg`)**: Hamburger menu with drawer component, click/tap-only dropdowns
+- **Desktop (`≥ lg`)**: Full horizontal navigation with hover-enabled dropdowns (also click/tap for accessibility)
+
 ### Functional Requirements
 
 #### Backend & Data Management
@@ -176,6 +199,17 @@ As a visitor using assistive technology (screen reader, keyboard-only, or mobile
 - **FR-022a**: System SHOULD optionally prevent deletion of pages that are referenced in the navigation menu and display a warning message listing where the page is used
 - **FR-023**: System MUST allow administrators to delete menu items
 - **FR-024**: System MUST save menu changes only when administrator explicitly saves
+- **FR-024-Cache**: System MUST implement caching and error logging for navigation menus:
+  - a. Cache rendered menus using Django's database cache backend with 1-hour TTL to reduce database queries
+  - b. Invalidate cached menus immediately when menu settings are saved or deleted
+  - c. Generate separate cache keys per site and locale (format: `navigation_menu_{site_pk}_{language_code}`)
+  - d. Log navigation-related errors (cache failures, invalid page references, locale resolution errors) using Django's logging framework at ERROR level
+  - e. Log to console in development and to file in production environments
+  - f. Gracefully degrade when cache is unavailable (fall back to direct database queries and log the cache failure)
+- **FR-024-Limits**: System MUST implement soft limits for menu size:
+  - g. Display a warning in the admin interface when total menu items (including all nested items) approaches 100 items
+  - h. Allow administrators to save menus exceeding 100 items (soft limit with warning, not a hard block)
+  - i. Count all menu items recursively (top-level items + dropdown items + nested items) when calculating total for the warning threshold
 
 #### Frontend Rendering & Accessibility (WCAG 2.1 AA Compliance)
 
@@ -192,14 +226,14 @@ As a visitor using assistive technology (screen reader, keyboard-only, or mobile
   - Enter/Space to activate links or toggle dropdowns
   - Escape to close open dropdowns
   - Arrow keys (down/up) to navigate within dropdowns
-- **FR-032a**: Dropdown menus MUST open on hover for desktop devices (≥1024px screen width)
+- **FR-032a**: Dropdown menus MUST open on hover for desktop breakpoint (`lg+` / ≥1024px screen width)
 - **FR-032b**: Dropdown menus MUST also support click/tap to open on all devices (including desktop) for accessibility
-- **FR-032c**: Dropdown menus on mobile devices (<1024px) MUST use click/tap only (no hover trigger)
+- **FR-032c**: Dropdown menus on mobile/tablet breakpoints (`< lg` / <1024px) MUST use click/tap only (no hover trigger)
 - **FR-033**: Focus states MUST be clearly visible with sufficient contrast (3:1 ratio minimum)
 - **FR-034**: Active/current page MUST be indicated with `aria-current="page"` attribute
 - **FR-035**: Navigation MUST render using DaisyUI theme-aware classes for automatic dark/light mode support
 - **FR-036**: Dropdown menus MUST use theme-aware background colors (e.g., `bg-base-100` instead of hardcoded `bg-white`)
-- **FR-037**: Navigation MUST be responsive with mobile-friendly hamburger menu for screens < 1024px (lg breakpoint)
+- **FR-037**: Navigation MUST be responsive with mobile-friendly hamburger menu at mobile/tablet breakpoints (`< lg` / < 1024px)
 - **FR-037a**: Mobile hamburger menu MUST use DaisyUI drawer component that slides in from the left side
 - **FR-037b**: Mobile drawer MUST include a visible close button (× icon) in addition to Escape key support
 - **FR-037c**: Mobile drawer MUST overlay the main content with semi-transparent backdrop when open
@@ -208,10 +242,8 @@ As a visitor using assistive technology (screen reader, keyboard-only, or mobile
 - **FR-038**: Mobile hamburger menu MUST use accessible button with `aria-expanded` state
 - **FR-039**: Navigation MUST provide skip link for keyboard users to bypass menu and jump to main content
 - **FR-040**: Dropdown menus SHOULD use `<details>`/`<summary>` elements for progressive enhancement (works without JavaScript)
-- **FR-041**: Navigation templates MUST be structured as reusable components:
-  - `navigation.html` - Main navigation wrapper
-  - `navigation_item.html` - Simple link rendering
-  - `navigation_dropdown.html` - Dropdown menu rendering
+- **FR-041**: Navigation templates MUST be structured as a single consolidated template:
+  - `navigation.html` - Complete navigation template with mobile drawer, desktop menubar, and dropdown rendering
 - **FR-042**: Navigation component MUST be included in `base.html` template for site-wide availability
 - **FR-043**: Menu links MUST have minimum touch target size of 44x44 pixels for mobile accessibility
 - **FR-044**: Color contrast MUST meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text)
@@ -233,10 +265,8 @@ As a visitor using assistive technology (screen reader, keyboard-only, or mobile
 
 ### Frontend Template Structure
 
-- **navigation.html**: Main navigation component template that renders the complete menu structure with ARIA semantics, responsive layout, and theme support. Included in `base.html` for site-wide availability.
-- **navigation_item.html**: Reusable template block for rendering simple menu links (both top-level and within dropdowns) with proper ARIA roles and active page indication.
-- **navigation_dropdown.html**: Template block for rendering dropdown menus with `<details>`/`<summary>` elements, ARIA properties (`aria-haspopup`, `aria-controls`, `aria-labelledby`), and nested child items.
-- **Skip Link**: Visually hidden anchor link positioned as first focusable element, allowing keyboard users to bypass navigation and jump to main content (WCAG 2.1 requirement).
+- **navigation.html**: Complete navigation component template that renders the entire menu structure including mobile drawer, desktop menubar, and dropdown menus with ARIA semantics, responsive layout, DaisyUI components, and theme support. Included in `base.html` for site-wide availability.
+- **Skip Link**: Visually hidden anchor link positioned as first focusable element in `base.html`, allowing keyboard users to bypass navigation and jump to main content (WCAG 2.1 requirement).
 - **Theme Classes**: DaisyUI theme-aware utility classes (e.g., `bg-base-100`, `text-base-content`) that automatically adapt to active theme (light/dark) without hardcoded colors.
 
 ## Success Criteria *(mandatory)*
@@ -261,4 +291,4 @@ As a visitor using assistive technology (screen reader, keyboard-only, or mobile
 - **SC-016**: All interactive menu elements meet 4.5:1 color contrast ratio for text and 3:1 for interactive components
 - **SC-017**: Navigation remains functional with JavaScript disabled (dropdowns work via `<details>` element)
 - **SC-018**: Users can activate skip link to bypass navigation and jump directly to main content using keyboard
-- **SC-019**: Dropdown menus automatically position themselves to avoid viewport overflow (tested at viewport widths of 320px, 768px, 1024px, and 1920px)
+- **SC-019**: Dropdown menus automatically position themselves to avoid viewport overflow (tested at breakpoints: mobile 320px/`sm`, tablet 640px/`md`, laptop 1024px/`lg`, desktop 1280px/`xl`, wide 1920px/`2xl`)
diff --git a/src/core/settings/base.py b/src/core/settings/base.py
index e069566..4f92dfd 100644
--- a/src/core/settings/base.py
+++ b/src/core/settings/base.py
@@ -30,6 +30,7 @@
     "search",
     "locales",
     "content",
+    "navigation",
     "wagtail.contrib.forms",
     "wagtail.contrib.redirects",
     "wagtail.contrib.settings",
diff --git a/src/core/templates/base.html b/src/core/templates/base.html
index ec4b027..a25665a 100644
--- a/src/core/templates/base.html
+++ b/src/core/templates/base.html
@@ -1,4 +1,4 @@
-{% load static tailwind_tags wagtailcore_tags wagtailuserbar %}
+{% load navigation_tags static tailwind_tags wagtailcore_tags wagtailuserbar %}
 
 <!DOCTYPE html>
 <html lang="en">
@@ -36,9 +36,20 @@
     </head>
 
     <body class="{% block body_class %}{% endblock %}">
+        {# Skip link for accessibility #}
+        <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-4 focus:bg-primary focus:text-primary-content focus:ring-2 focus:ring-primary-focus">
+            Skip to main content
+        </a>
+
         {% wagtailuserbar %}
 
-        {% block content %}{% endblock %}
+        {# Navigation menu #}
+        {% navigation_menu %}
+
+        {# Main content #}
+        <main id="main-content" tabindex="-1" class="container mx-auto px-4 mt-4 mb-4">
+            {% block content %}{% endblock %}
+        </main>
 
         {# Global javascript #}
         <script type="text/javascript" src="{% static 'js/core.js' %}"></script>
diff --git a/src/navigation/README.md b/src/navigation/README.md
new file mode 100644
index 0000000..9a54255
--- /dev/null
+++ b/src/navigation/README.md
@@ -0,0 +1,156 @@
+# Navigation App
+
+Provides a site-wide navigation menu system for QuakerCMS with support for:
+- Page links (to Wagtail pages)
+- External links
+- Dropdown menus (single level)
+- Mobile-responsive drawer navigation
+- WCAG 2.1 AA accessibility compliance
+
+## Quick Start
+
+### Scaffold Test Content
+
+To quickly set up test pages and navigation menu for development:
+
+```bash
+cd src
+python manage.py scaffold_navbar_content
+```
+
+This creates:
+- **About** page (top-level)
+- **Programs** page with dropdown containing:
+  - Programs overview
+  - Adult Education
+  - Youth Programs
+- **FGC Website** (external link)
+- **Contact** page (top-level)
+
+### Command Options
+
+```bash
+# Delete existing scaffolded content before creating new
+python manage.py scaffold_navbar_content --delete
+
+# Only create pages, skip navigation menu configuration
+python manage.py scaffold_navbar_content --skip-menu
+
+# View help
+python manage.py scaffold_navbar_content --help
+```
+
+## Configuration
+
+Navigation menu is configured in **Wagtail Admin → Settings → Navigation Menu**.
+
+### Menu Structure
+
+The navigation menu uses StreamField blocks:
+
+#### Page Link
+Links to a Wagtail page. Automatically:
+- Uses page title as link text
+- Marks current page with `aria-current="page"`
+- Supports translations (links to translated version in current locale)
+
+#### External Link
+Links to an external URL. Requires:
+- **URL**: Full URL including `https://`
+- **Title**: Display text for the link
+
+#### Dropdown Menu
+Creates a dropdown with nested menu items. Contains:
+- **Title**: Display text for the dropdown button
+- **Items**: StreamField of PageLink or ExternalLink blocks
+- **Limitation**: Maximum 2 levels (no nested dropdowns)
+
+## Development
+
+### Running Tailwind CSS Watcher
+
+The navigation uses Tailwind CSS and DaisyUI components. For development:
+
+```bash
+# Terminal 1 - Django server
+cd src
+python manage.py runserver
+
+# Terminal 2 - Tailwind watcher (auto-rebuild CSS)
+cd src/theme/static_src
+npm run dev
+```
+
+### Testing
+
+Run navigation tests:
+
+```bash
+cd src
+python manage.py test navigation
+```
+
+## Architecture
+
+### Templates
+
+- `navigation/navigation.html` - Main navigation template with desktop + mobile layouts
+- Separate rendering for desktop (menubar with hover) and mobile (drawer with touch)
+
+### Template Tags
+
+- `{% navigation_menu %}` - Renders the navigation menu
+- Auto-handles locale-aware translation lookup
+- Optimized with prefetching to avoid N+1 queries
+
+### Models
+
+- `NavigationMenuSetting` - Site-wide navigation configuration (BaseSiteSetting)
+- Stores menu structure as StreamField
+
+### Blocks
+
+See `navigation/blocks.py`:
+- `PageLinkBlock` - ChoiceBlock for selecting Wagtail pages
+- `ExternalLinkBlock` - StructBlock with URL + title fields
+- `MenuItemBlock` - StreamBlock for dropdown items (page_link or external_link only)
+- `DropdownMenuBlock` - StructBlock with title + items
+- `TopLevelMenuBlock` - StreamBlock for top-level menu (page_link, external_link, or dropdown)
+
+### Performance
+
+- **Page prefetching**: Collects all page IDs and fetches in single query
+- **Translation prefetching**: Fetches translations for current + default locale only
+- **Cache dictionary**: O(1) lookup for translations during rendering
+
+### Accessibility
+
+- Desktop: `role="menubar"` with `role="menuitem"`
+- Mobile: Drawer with semantic navigation landmarks
+- Skip link: Hidden until focused (WCAG 2.1 AA)
+- Keyboard navigation: Full support with focus indicators
+- ARIA: Proper labels, expanded states, current page indicators
+
+## Styling
+
+Uses DaisyUI components:
+- `navbar` - Main navigation bar
+- `drawer` - Mobile slide-out menu
+- `menu` - Menu list with horizontal/vertical variants
+- `dropdown` - Dropdown menu with hover support
+- `btn` - Buttons with ghost variant for hamburger icon
+
+Custom styling:
+- `bg-gray-50 shadow` - Subtle background for navbar
+- `z-50` - Proper stacking for dropdowns
+- Edge detection prevents dropdowns from going off-screen
+
+## Future Enhancements
+
+Potential improvements:
+- Multi-level dropdowns (3+ levels)
+- Mega menus with rich content
+- Icons/images in menu items
+- Menu item ordering/sorting in admin
+- Per-locale navigation menus
+- Menu item visibility rules (logged in/out, user roles)
diff --git a/src/navigation/__init__.py b/src/navigation/__init__.py
new file mode 100644
index 0000000..bba525c
--- /dev/null
+++ b/src/navigation/__init__.py
@@ -0,0 +1 @@
+"""Navigation menu system for QuakerCMS."""
diff --git a/src/navigation/admin.py b/src/navigation/admin.py
new file mode 100644
index 0000000..0b17528
--- /dev/null
+++ b/src/navigation/admin.py
@@ -0,0 +1,3 @@
+"""Admin configuration for navigation app."""
+
+# Navigation menu is configured via Wagtail Settings, not Django admin
diff --git a/src/navigation/apps.py b/src/navigation/apps.py
new file mode 100644
index 0000000..4927db5
--- /dev/null
+++ b/src/navigation/apps.py
@@ -0,0 +1,11 @@
+"""App configuration for navigation menu system."""
+
+from django.apps import AppConfig
+
+
+class NavigationConfig(AppConfig):
+    """Configuration for the navigation app."""
+
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "navigation"
+    verbose_name = "Navigation Menu"
diff --git a/src/navigation/blocks.py b/src/navigation/blocks.py
new file mode 100644
index 0000000..48efd2b
--- /dev/null
+++ b/src/navigation/blocks.py
@@ -0,0 +1,115 @@
+"""Navigation menu blocks for QuakerCMS.
+
+This module defines the StreamField blocks used for building navigation menus.
+The blocks enforce a maximum 2-level nesting structure through their schema:
+- Top level can contain page links, external links, or dropdowns
+- Dropdown items can only contain page links or external links (no nested dropdowns)
+
+Note: These blocks do not use Meta.template for rendering. Instead, rendering is
+handled by the navigation_menu template tag in navigation/templatetags/navigation_tags.py.
+This centralizes rendering logic and makes it easier to maintain desktop/mobile variations.
+"""
+
+from django.core.exceptions import ValidationError
+from wagtail import blocks
+
+
+class PageLinkBlock(blocks.StructBlock):
+    """Internal page link with optional custom title."""
+
+    page = blocks.PageChooserBlock(
+        required=True,
+        help_text="Select a page to link to",
+    )
+    custom_title = blocks.CharBlock(
+        required=False,
+        max_length=100,
+        help_text="Override the page title (leave blank to use page's own title)",
+    )
+    anchor = blocks.CharBlock(
+        required=False,
+        max_length=50,
+        help_text="Optional anchor (e.g., 'section-name' for #section-name)",
+    )
+
+    class Meta:
+        icon = "doc-full"
+        label = "Page Link"
+
+
+class ExternalLinkBlock(blocks.StructBlock):
+    """External URL link."""
+
+    url = blocks.URLBlock(
+        required=True,
+        help_text="Full URL including http:// or https://",
+    )
+    title = blocks.CharBlock(
+        required=True,
+        max_length=100,
+        help_text="Link text to display in menu",
+    )
+    anchor = blocks.CharBlock(
+        required=False,
+        max_length=50,
+        help_text="Optional anchor (e.g., 'section' for #section)",
+    )
+
+    class Meta:
+        icon = "link"
+        label = "External Link"
+
+
+class MenuItemBlock(blocks.StreamBlock):
+    """Items within a dropdown - only simple links allowed (enforces 2-level maximum)."""
+
+    page_link = PageLinkBlock()
+    external_link = ExternalLinkBlock()
+    # NOTE: No DropdownMenuBlock here - prevents 3rd level nesting
+
+    class Meta:
+        icon = "link"
+        label = "Menu Item"
+        max_num = 20  # Reasonable limit per dropdown
+
+
+class DropdownMenuBlock(blocks.StructBlock):
+    """Dropdown menu with child items."""
+
+    title = blocks.CharBlock(
+        required=True,
+        max_length=100,
+        help_text="Dropdown menu label",
+    )
+    items = MenuItemBlock(
+        help_text="Links to display in dropdown menu",
+    )
+
+    def clean(self, value):
+        """Validate that dropdown contains at least one item."""
+        # Check if items is empty before calling super().clean()
+        # This allows us to provide a more specific error message
+        items = value.get("items") if isinstance(value, dict) else []
+        if not items:
+            raise ValidationError("Dropdown menu must contain at least one item")
+
+        # Call parent clean to validate other fields
+        cleaned = super().clean(value)
+        return cleaned
+
+    class Meta:
+        icon = "list-ul"
+        label = "Dropdown Menu"
+
+
+class TopLevelMenuBlock(blocks.StreamBlock):
+    """Top-level menu items - can be links OR dropdowns."""
+
+    page_link = PageLinkBlock()
+    external_link = ExternalLinkBlock()
+    dropdown = DropdownMenuBlock()
+
+    class Meta:
+        icon = "list-ul"
+        label = "Navigation Menu"
+        max_num = 10  # Reasonable limit for usability
diff --git a/src/navigation/management/__init__.py b/src/navigation/management/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/src/navigation/management/commands/__init__.py b/src/navigation/management/commands/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/src/navigation/management/commands/scaffold_navbar_content.py b/src/navigation/management/commands/scaffold_navbar_content.py
new file mode 100644
index 0000000..c32dd7d
--- /dev/null
+++ b/src/navigation/management/commands/scaffold_navbar_content.py
@@ -0,0 +1,401 @@
+"""
+Management command to scaffold test navigation content.
+
+Creates sample pages with navigation menus for testing the navigation system.
+"""
+
+from django.core.management.base import BaseCommand, CommandError
+from wagtail.models import Locale, Site
+
+from content.models import ContentPage
+from home.models import HomePage
+from navigation.models import NavigationMenuSetting
+
+
+class Command(BaseCommand):
+    """Scaffold test navigation content with top-level and dropdown menu items."""
+
+    help = "Creates sample pages (with dev_ prefix) and navigation menu for testing"
+
+    def add_arguments(self, parser):
+        """Add command arguments."""
+        parser.add_argument(
+            "--delete",
+            action="store_true",
+            help="Delete existing scaffolded content before creating new",
+        )
+        parser.add_argument(
+            "--skip-menu",
+            action="store_true",
+            help="Skip creating navigation menu (only create pages)",
+        )
+        parser.add_argument(
+            "--force-menu",
+            action="store_true",
+            help="Force overwrite existing navigation menu (default: skip if menu exists)",
+        )
+
+    def handle(self, *args, **options):
+        """Execute the command."""
+        try:
+            # Get the default locale
+            default_locale = Locale.get_default()
+
+            # Get the site and its root page (should be HomePage)
+            site = Site.objects.filter(is_default_site=True).first()
+            if not site:
+                raise CommandError(
+                    "No default site found. Create a site in Wagtail Admin first.",
+                )
+
+            home_page = site.root_page.specific
+            if not isinstance(home_page, HomePage):
+                raise CommandError(
+                    f"Site root page is {type(home_page).__name__}, not HomePage. "
+                    "Please set a HomePage as the site root in Wagtail Admin.",
+                )
+
+            # Delete existing scaffolded content if requested
+            if options["delete"]:
+                self._delete_scaffolded_content(home_page)
+                # Refresh home_page from database after tree fix
+                home_page = type(home_page).objects.get(pk=home_page.pk)
+
+            # Create sample pages
+            pages = self._create_sample_pages(home_page, default_locale)
+
+            # Create navigation menu if not skipped
+            if not options["skip_menu"]:
+                self._create_navigation_menu(
+                    pages,
+                    default_locale,
+                    options["force_menu"],
+                )
+
+            self.stdout.write(
+                self.style.SUCCESS("\n✅ Successfully scaffolded navigation content!"),
+            )
+            self.stdout.write("\nCreated pages:")
+            for page in pages:
+                self.stdout.write(f"  • {page.title} ({page.get_url()})")
+
+            if not options["skip_menu"]:
+                self.stdout.write(
+                    "\n📋 Navigation menu configured in Wagtail Admin → Settings → Navigation",
+                )
+
+        except Exception as e:
+            raise CommandError(f"Error scaffolding content: {e}")
+
+    def _delete_scaffolded_content(self, home_page):
+        """Delete previously scaffolded content."""
+        self.stdout.write("Deleting existing scaffolded content...")
+
+        # Define the slugs of pages created by this scaffold command
+        # Prefixed with dev_ to avoid accidental deletion of production content
+        SCAFFOLDED_SLUGS = (
+            "dev_about",
+            "dev_programs",
+            "dev_contact",
+        )
+
+        # Query for only the scaffolded pages directly under home page
+        deleted_count = 0
+        scaffolded_pages = ContentPage.objects.filter(
+            depth=home_page.depth + 1,
+            path__startswith=home_page.path,
+            slug__in=SCAFFOLDED_SLUGS,
+        )
+
+        for page in scaffolded_pages:
+            # Delete the page and all its descendants (e.g., adult-education, youth-programs)
+            # get_descendants() returns all descendant pages in the tree
+            descendant_count = page.get_descendants().count()
+            page.delete()  # This will cascade delete all descendants
+            deleted_count += 1
+            if descendant_count > 0:
+                self.stdout.write(
+                    f"  Deleted '{page.title}' and {descendant_count} descendant(s)",
+                )
+
+        if deleted_count > 0:
+            self.stdout.write(
+                self.style.WARNING(f"Deleted {deleted_count} scaffolded page(s)"),
+            )
+
+            # Fix the page tree after deletion to ensure consistency
+            from django.core.management import call_command
+
+            self.stdout.write("Fixing page tree structure...")
+            call_command("fixtree", verbosity=0)
+            self.stdout.write(self.style.SUCCESS("Page tree fixed"))
+
+    def _create_sample_pages(self, home_page, locale):
+        """Create sample pages for testing."""
+        self.stdout.write("Creating sample pages...")
+
+        def get_or_create_page(parent, *, title, slug, body):
+            """Get existing page or create a new one (idempotent).
+
+            Returns:
+                tuple: (page, created) where created is True if a new page was created,
+                       False if an existing page was reused.
+            """
+            existing = (
+                parent.get_children()
+                .type(ContentPage)
+                .filter(slug=slug, locale=locale)
+                .first()
+            )
+            if existing:
+                return existing.specific, False
+
+            page = ContentPage(
+                title=title,
+                slug=slug,
+                locale=locale,
+                body=body,
+            )
+            parent.add_child(instance=page)
+            page.save_revision().publish()
+            return page, True
+
+        pages = []
+        created_count = 0
+        reused_count = 0
+
+        # Top-level pages
+        about_page, created = get_or_create_page(
+            home_page,
+            title="About",
+            slug="dev_about",
+            body=[
+                {
+                    "type": "heading",
+                    "value": {"text": "About Us", "level": "h2"},
+                },
+                {
+                    "type": "rich_text",
+                    "value": "<p>Learn more about our Quaker community and values.</p>",
+                },
+            ],
+        )
+        pages.append(about_page)
+        if created:
+            created_count += 1
+        else:
+            reused_count += 1
+
+        programs_page, created = get_or_create_page(
+            home_page,
+            title="Programs",
+            slug="dev_programs",
+            body=[
+                {
+                    "type": "heading",
+                    "value": {"text": "Our Programs", "level": "h2"},
+                },
+                {
+                    "type": "rich_text",
+                    "value": "<p>Explore our educational and community programs.</p>",
+                },
+            ],
+        )
+        pages.append(programs_page)
+        if created:
+            created_count += 1
+        else:
+            reused_count += 1
+
+        # Sub-pages under Programs (for dropdown testing)
+        adult_education, created = get_or_create_page(
+            programs_page,
+            title="Adult Education",
+            slug="dev_adult-education",
+            body=[
+                {
+                    "type": "heading",
+                    "value": {"text": "Adult Education Programs", "level": "h2"},
+                },
+                {
+                    "type": "rich_text",
+                    "value": "<p>Educational opportunities for adults in our community.</p>",
+                },
+            ],
+        )
+        pages.append(adult_education)
+        if created:
+            created_count += 1
+        else:
+            reused_count += 1
+
+        youth_programs, created = get_or_create_page(
+            programs_page,
+            title="Youth Programs",
+            slug="dev_youth-programs",
+            body=[
+                {
+                    "type": "heading",
+                    "value": {"text": "Youth Programs", "level": "h2"},
+                },
+                {
+                    "type": "rich_text",
+                    "value": "<p>Programs and activities for young people.</p>",
+                },
+            ],
+        )
+        pages.append(youth_programs)
+        if created:
+            created_count += 1
+        else:
+            reused_count += 1
+
+        # Additional top-level page
+        contact_page, created = get_or_create_page(
+            home_page,
+            title="Contact",
+            slug="dev_contact",
+            body=[
+                {
+                    "type": "heading",
+                    "value": {"text": "Contact Us", "level": "h2"},
+                },
+                {
+                    "type": "rich_text",
+                    "value": "<p>Get in touch with our community.</p>",
+                },
+            ],
+        )
+        pages.append(contact_page)
+        if created:
+            created_count += 1
+        else:
+            reused_count += 1
+
+        # Report creation/reuse statistics
+        if reused_count > 0:
+            self.stdout.write(
+                self.style.SUCCESS(
+                    f"Created {created_count} pages, reused {reused_count} pages",
+                ),
+            )
+        else:
+            self.stdout.write(
+                self.style.SUCCESS(f"Created {created_count} pages"),
+            )
+        return pages
+
+    def _create_navigation_menu(self, pages, locale, force_menu=False):
+        """Create navigation menu configuration.
+
+        Args:
+            pages: List of pages to include in the menu
+            locale: The locale for the menu
+            force_menu: If True, overwrite existing menu. If False, skip if menu exists.
+        """
+        self.stdout.write("Configuring navigation menu...")
+
+        # Get the default site
+        site = Site.objects.filter(is_default_site=True).first()
+        if not site:
+            self.stdout.write(
+                self.style.WARNING("No default site found, skipping navigation menu"),
+            )
+            return
+
+        # Get or create NavigationMenuSetting for the site
+        nav_settings = NavigationMenuSetting.for_site(site)
+
+        # Check if menu already exists and force flag is not set
+        if nav_settings.menu_items and not force_menu:
+            self.stdout.write(
+                self.style.WARNING(
+                    f"Navigation menu already exists for site '{site.site_name}'. "
+                    "Skipping menu configuration to preserve manual changes. "
+                    "Use --force-menu to overwrite.",
+                ),
+            )
+            return
+
+        # Find pages by title
+        about_page = next((p for p in pages if p.title == "About"), None)
+        programs_page = next((p for p in pages if p.title == "Programs"), None)
+        adult_ed_page = next((p for p in pages if p.title == "Adult Education"), None)
+        youth_page = next((p for p in pages if p.title == "Youth Programs"), None)
+        contact_page = next((p for p in pages if p.title == "Contact"), None)
+
+        # Build navigation menu structure
+        # Note: PageLinkBlock is a StructBlock with 'page', 'custom_title', and 'anchor' fields
+        nav_settings.menu_items = [
+            {
+                "type": "page_link",
+                "value": {
+                    "page": about_page.id if about_page else None,
+                    "custom_title": "",
+                    "anchor": "",
+                },
+                "id": "about-link",
+            },
+            {
+                "type": "dropdown",
+                "value": {
+                    "title": "Programs",
+                    "items": [
+                        {
+                            "type": "page_link",
+                            "value": {
+                                "page": programs_page.id if programs_page else None,
+                                "custom_title": "",
+                                "anchor": "",
+                            },
+                            "id": "programs-overview-link",
+                        },
+                        {
+                            "type": "page_link",
+                            "value": {
+                                "page": adult_ed_page.id if adult_ed_page else None,
+                                "custom_title": "",
+                                "anchor": "",
+                            },
+                            "id": "adult-ed-link",
+                        },
+                        {
+                            "type": "page_link",
+                            "value": {
+                                "page": youth_page.id if youth_page else None,
+                                "custom_title": "",
+                                "anchor": "",
+                            },
+                            "id": "youth-link",
+                        },
+                    ],
+                },
+                "id": "programs-dropdown",
+            },
+            {
+                "type": "external_link",
+                "value": {
+                    "url": "https://www.fgcquaker.org/",
+                    "title": "FGC Website",
+                    "anchor": "",
+                },
+                "id": "fgc-link",
+            },
+            {
+                "type": "page_link",
+                "value": {
+                    "page": contact_page.id if contact_page else None,
+                    "custom_title": "",
+                    "anchor": "",
+                },
+                "id": "contact-link",
+            },
+        ]
+
+        nav_settings.save()
+
+        self.stdout.write(
+            self.style.SUCCESS(
+                f"Updated NavigationMenuSetting for site: {site.site_name}",
+            ),
+        )
diff --git a/src/navigation/migrations/0001_initial.py b/src/navigation/migrations/0001_initial.py
new file mode 100644
index 0000000..76db4bb
--- /dev/null
+++ b/src/navigation/migrations/0001_initial.py
@@ -0,0 +1,133 @@
+# Generated by Django 5.2.7 on 2025-11-05 20:27
+
+import django.db.models.deletion
+import wagtail.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    initial = True
+
+    dependencies = [
+        ("wagtailcore", "0095_groupsitepermission"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="NavigationMenuSetting",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                (
+                    "menu_items",
+                    wagtail.fields.StreamField(
+                        [("page_link", 3), ("external_link", 7), ("dropdown", 10)],
+                        blank=True,
+                        block_lookup={
+                            0: (
+                                "wagtail.blocks.PageChooserBlock",
+                                (),
+                                {
+                                    "help_text": "Select a page to link to",
+                                    "required": True,
+                                },
+                            ),
+                            1: (
+                                "wagtail.blocks.CharBlock",
+                                (),
+                                {
+                                    "help_text": "Override the page title (leave blank to use page's own title)",
+                                    "max_length": 100,
+                                    "required": False,
+                                },
+                            ),
+                            2: (
+                                "wagtail.blocks.CharBlock",
+                                (),
+                                {
+                                    "help_text": "Optional anchor (e.g., 'section-name' for #section-name)",
+                                    "max_length": 50,
+                                    "required": False,
+                                },
+                            ),
+                            3: (
+                                "wagtail.blocks.StructBlock",
+                                [[("page", 0), ("custom_title", 1), ("anchor", 2)]],
+                                {},
+                            ),
+                            4: (
+                                "wagtail.blocks.URLBlock",
+                                (),
+                                {
+                                    "help_text": "Full URL including http:// or https://",
+                                    "required": True,
+                                },
+                            ),
+                            5: (
+                                "wagtail.blocks.CharBlock",
+                                (),
+                                {
+                                    "help_text": "Link text to display in menu",
+                                    "max_length": 100,
+                                    "required": True,
+                                },
+                            ),
+                            6: (
+                                "wagtail.blocks.CharBlock",
+                                (),
+                                {
+                                    "help_text": "Optional anchor (e.g., 'section' for #section)",
+                                    "max_length": 50,
+                                    "required": False,
+                                },
+                            ),
+                            7: (
+                                "wagtail.blocks.StructBlock",
+                                [[("url", 4), ("title", 5), ("anchor", 6)]],
+                                {},
+                            ),
+                            8: (
+                                "wagtail.blocks.CharBlock",
+                                (),
+                                {
+                                    "help_text": "Dropdown menu label",
+                                    "max_length": 100,
+                                    "required": True,
+                                },
+                            ),
+                            9: (
+                                "wagtail.blocks.StreamBlock",
+                                [[("page_link", 3), ("external_link", 7)]],
+                                {"help_text": "Links to display in dropdown menu"},
+                            ),
+                            10: (
+                                "wagtail.blocks.StructBlock",
+                                [[("title", 8), ("items", 9)]],
+                                {},
+                            ),
+                        },
+                        help_text="Configure the main navigation menu for your site.",
+                    ),
+                ),
+                (
+                    "site",
+                    models.OneToOneField(
+                        editable=False,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        to="wagtailcore.site",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Navigation Menu",
+                "verbose_name_plural": "Navigation Menu",
+            },
+        ),
+    ]
diff --git a/src/navigation/migrations/__init__.py b/src/navigation/migrations/__init__.py
new file mode 100644
index 0000000..1a28462
--- /dev/null
+++ b/src/navigation/migrations/__init__.py
@@ -0,0 +1 @@
+"""Migrations for navigation app."""
diff --git a/src/navigation/models.py b/src/navigation/models.py
new file mode 100644
index 0000000..9b39fad
--- /dev/null
+++ b/src/navigation/models.py
@@ -0,0 +1,27 @@
+"""Models for navigation menu system."""
+
+from wagtail.admin.panels import FieldPanel
+from wagtail.contrib.settings.models import BaseSiteSetting, register_setting
+from wagtail.fields import StreamField
+
+from navigation.blocks import TopLevelMenuBlock
+
+
+@register_setting
+class NavigationMenuSetting(BaseSiteSetting):
+    """Site-wide navigation menu configuration."""
+
+    menu_items = StreamField(
+        TopLevelMenuBlock(),
+        blank=True,
+        use_json_field=True,
+        help_text="Configure the main navigation menu for your site.",
+    )
+
+    panels = [
+        FieldPanel("menu_items"),
+    ]
+
+    class Meta:
+        verbose_name = "Navigation Menu"
+        verbose_name_plural = "Navigation Menu"
diff --git a/src/navigation/templates/navigation/navigation.html b/src/navigation/templates/navigation/navigation.html
new file mode 100644
index 0000000..81f2499
--- /dev/null
+++ b/src/navigation/templates/navigation/navigation.html
@@ -0,0 +1,166 @@
+{% load static %}
+
+{% if menu_items %}
+  <nav class="bg-black text-white shadow-md sticky top-0 z-50" aria-label="Main navigation">
+    <div class="container mx-auto px-2">
+      <div class="navbar w-full">
+        <div class="navbar-start">
+        {# Mobile dropdown menu #}
+          <div class="dropdown">
+            <button
+              tabindex="0"
+              class="btn btn-ghost lg:hidden"
+              aria-label="Open menu"
+              aria-expanded="false"
+              aria-controls="mobile-menu"
+              aria-haspopup="true"
+              id="mobile-menu-button"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+              </svg>
+            </button>
+            <ul
+              id="mobile-menu"
+              tabindex="0"
+              class="menu menu-sm dropdown-content bg-white text-black rounded-box z-[1] mt-3 w-52 p-2 shadow hidden"
+              role="menu"
+              aria-labelledby="mobile-menu-button"
+            >
+              {% for item in menu_items %}
+                {% if item.type == 'page_link' or item.type == 'external_link' %}
+                  <li role="none">
+                    <a
+                      href="{{ item.url }}"
+                      role="menuitem"
+                      class="text-black hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500{% if item.is_current %} active{% endif %}"
+                      {% if item.is_current %}aria-current="page"{% endif %}
+                    >
+                      {{ item.title }}
+                    </a>
+                  </li>
+                {% elif item.type == 'dropdown' %}
+                  <li role="none">
+                    <details>
+                      <summary
+                        role="menuitem"
+                        aria-haspopup="true"
+                        class="text-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      >
+                        {{ item.title }}
+                      </summary>
+                      <ul class="p-2 bg-white" role="menu">
+                        {% for child in item.items %}
+                          <li role="none">
+                            <a
+                              href="{{ child.url }}"
+                              role="menuitem"
+                              class="text-black hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500{% if child.is_current %} active{% endif %}"
+                              {% if child.is_current %}aria-current="page"{% endif %}
+                            >
+                              {{ child.title }}
+                            </a>
+                          </li>
+                        {% endfor %}
+                      </ul>
+                    </details>
+                  </li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+          </div>
+
+        {# Desktop horizontal menu #}
+          <ul class="menu menu-horizontal px-1 hidden lg:flex" role="menubar">
+            {% for item in menu_items %}
+              {% if item.type == 'page_link' or item.type == 'external_link' %}
+                <li role="none">
+                  <a
+                    href="{{ item.url }}"
+                    role="menuitem"
+                    class="focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black{% if item.is_current %} active{% endif %}"
+                    {% if item.is_current %}aria-current="page"{% endif %}
+                  >
+                    {{ item.title }}
+                  </a>
+                </li>
+              {% elif item.type == 'dropdown' %}
+                <li role="none">
+                  <details>
+                    <summary
+                      role="menuitem"
+                      aria-haspopup="true"
+                      class="focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black"
+                    >
+                      {{ item.title }}
+                    </summary>
+                    <ul class="p-2 bg-white text-black rounded-box shadow z-[1]" role="menu">
+                      {% for child in item.items %}
+                        <li role="none">
+                          <a
+                            href="{{ child.url }}"
+                            role="menuitem"
+                            class="text-black hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500{% if child.is_current %} active{% endif %}"
+                            {% if child.is_current %}aria-current="page"{% endif %}
+                          >
+                            {{ child.title }}
+                          </a>
+                        </li>
+                      {% endfor %}
+                    </ul>
+                  </details>
+                </li>
+              {% endif %}
+            {% endfor %}
+          </ul>
+        </div>
+
+      {# Right side - placeholder for future buttons/search #}
+        <div class="navbar-end">
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  {# JavaScript for mobile menu accessibility #}
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const mobileMenuButton = document.getElementById('mobile-menu-button');
+      const mobileMenu = document.getElementById('mobile-menu');
+
+      if (mobileMenuButton && mobileMenu) {
+        // Toggle mobile menu
+        mobileMenuButton.addEventListener('click', function() {
+          const isExpanded = this.getAttribute('aria-expanded') === 'true';
+          this.setAttribute('aria-expanded', !isExpanded);
+          mobileMenu.classList.toggle('hidden');
+
+          if (!isExpanded) {
+            // Focus first menu item when opening
+            const firstItem = mobileMenu.querySelector('a, summary');
+            if (firstItem) firstItem.focus();
+          }
+        });
+
+        // Close menu on Escape key
+        document.addEventListener('keydown', function(e) {
+          if (e.key === 'Escape' && !mobileMenu.classList.contains('hidden')) {
+            mobileMenu.classList.add('hidden');
+            mobileMenuButton.setAttribute('aria-expanded', 'false');
+            mobileMenuButton.focus();
+          }
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', function(e) {
+          if (!mobileMenuButton.contains(e.target) && !mobileMenu.contains(e.target)) {
+            if (!mobileMenu.classList.contains('hidden')) {
+              mobileMenu.classList.add('hidden');
+              mobileMenuButton.setAttribute('aria-expanded', 'false');
+            }
+          }
+        });
+      }
+    });
+  </script>
+{% endif %}
diff --git a/src/navigation/templatetags/__init__.py b/src/navigation/templatetags/__init__.py
new file mode 100644
index 0000000..686f688
--- /dev/null
+++ b/src/navigation/templatetags/__init__.py
@@ -0,0 +1 @@
+"""Template tags for navigation menu."""
diff --git a/src/navigation/templatetags/navigation_tags.py b/src/navigation/templatetags/navigation_tags.py
new file mode 100644
index 0000000..3039fce
--- /dev/null
+++ b/src/navigation/templatetags/navigation_tags.py
@@ -0,0 +1,198 @@
+"""Template tags for navigation menu rendering."""
+
+from django import template
+from wagtail.models import Locale, Page
+
+from navigation.models import NavigationMenuSetting
+
+register = template.Library()
+
+
+def _collect_page_ids(item, page_ids):
+    """Recursively collect all page IDs from menu structure."""
+    if item.block_type == "page_link":
+        page = item.value.get("page")
+        if page:
+            page_ids.append(page.id)
+    elif item.block_type == "dropdown":
+        for child in item.value.get("items", []):
+            _collect_page_ids(child, page_ids)
+
+
+@register.inclusion_tag("navigation/navigation.html", takes_context=True)
+def navigation_menu(context):
+    """Render navigation menu with locale-aware page links."""
+    request = context["request"]
+    current_locale = Locale.get_active()
+    default_locale = Locale.get_default()
+
+    # Get menu settings
+    menu_settings = NavigationMenuSetting.for_request(request)
+
+    if not menu_settings or not menu_settings.menu_items:
+        return {"menu_items": []}
+
+    # Collect all page IDs upfront
+    page_ids = []
+    for item in menu_settings.menu_items:
+        _collect_page_ids(item, page_ids)
+
+    # Prefetch all pages and their translations in bulk to reduce queries
+    pages_cache = {}
+    translations_cache = {}  # Cache translations by (translation_key, locale_id)
+
+    if page_ids:
+        # Fetch all pages with their locale relations
+        pages = Page.objects.filter(id__in=page_ids).select_related("locale")
+
+        # Collect translation keys to fetch all translations in one query
+        translation_keys = set()
+        for page in pages:
+            pages_cache[page.id] = page
+            if page.translation_key:
+                translation_keys.add(page.translation_key)
+
+        # Prefetch all translations for these pages in a single query
+        if translation_keys:
+            all_translations = Page.objects.filter(
+                translation_key__in=translation_keys,
+                locale__in=[current_locale, default_locale],
+            ).select_related("locale")
+
+            for trans_page in all_translations:
+                cache_key = (trans_page.translation_key, trans_page.locale_id)
+                translations_cache[cache_key] = trans_page
+
+    # Process menu items with cached pages and translations
+    processed_items = []
+    for item in menu_settings.menu_items:
+        processed_item = process_menu_item(
+            item,
+            current_locale,
+            default_locale,
+            context.get("page"),
+            pages_cache,
+            translations_cache,
+        )
+        if processed_item:
+            processed_items.append(processed_item)
+
+    return {
+        "menu_items": processed_items,
+        "current_page": context.get("page"),
+        "request": request,
+    }
+
+
+def process_menu_item(
+    item,
+    current_locale,
+    default_locale,
+    current_page=None,
+    pages_cache=None,
+    translations_cache=None,
+):
+    """Convert menu item to locale-specific version.
+
+    Args:
+        item: Menu item block from NavigationMenuSetting
+        current_locale: Current active locale
+        default_locale: Default fallback locale
+        current_page: Current page for highlighting active items
+        pages_cache: Dict mapping page IDs to prefetched Page objects (optional)
+        translations_cache: Dict mapping (translation_key, locale_id) to translated pages (optional)
+    """
+    item_type = item.block_type
+
+    if item_type == "page_link":
+        page = item.value.get("page")
+
+        if not page or not page.live:
+            return None
+
+        # Use cached page if available
+        if pages_cache and page.id in pages_cache:
+            page = pages_cache[page.id]
+
+        # Try to get page translation using cache first
+        localized_page = None
+        if translations_cache and page.translation_key:
+            # Try current locale from cache
+            cache_key = (page.translation_key, current_locale.id)
+            localized_page = translations_cache.get(cache_key)
+
+            # Try default locale from cache if current not found
+            if not localized_page:
+                cache_key = (page.translation_key, default_locale.id)
+                localized_page = translations_cache.get(cache_key)
+
+        # Fall back to database queries if not in cache
+        if not localized_page:
+            try:
+                localized_page = page.get_translation(current_locale)
+            except Page.DoesNotExist:
+                try:
+                    localized_page = page.get_translation(default_locale)
+                except Page.DoesNotExist:
+                    # If page doesn't exist in any locale or doesn't support translations,
+                    # use the original page
+                    localized_page = page
+
+        # Ensure the localized page is live before showing in menu
+        if not localized_page.live:
+            return None
+
+        anchor = item.value.get("anchor", "")
+        url = localized_page.url
+        if anchor:
+            url += f"#{anchor}"
+
+        return {
+            "type": "page_link",
+            "page": localized_page,
+            "url": url,
+            "title": item.value.get("custom_title") or localized_page.title,
+            "is_current": current_page and current_page.id == localized_page.id,
+        }
+
+    elif item_type == "external_link":
+        anchor = item.value.get("anchor", "")
+        url = item.value["url"]
+        if anchor:
+            url += f"#{anchor}"
+
+        return {
+            "type": "external_link",
+            "url": url,
+            "title": item.value["title"],
+            "is_current": False,
+        }
+
+    elif item_type == "dropdown":
+        child_items = []
+        has_current = False
+
+        for child in item.value.get("items", []):
+            processed_child = process_menu_item(
+                child,
+                current_locale,
+                default_locale,
+                current_page,
+                pages_cache,
+                translations_cache,
+            )
+            if processed_child:
+                child_items.append(processed_child)
+                if processed_child.get("is_current"):
+                    has_current = True
+
+        # Only include dropdown if it has at least one valid child
+        if child_items:
+            return {
+                "type": "dropdown",
+                "title": item.value["title"],
+                "items": child_items,
+                "is_open": has_current,
+            }
+
+    return None
diff --git a/src/navigation/tests.py b/src/navigation/tests.py
new file mode 100644
index 0000000..5d15618
--- /dev/null
+++ b/src/navigation/tests.py
@@ -0,0 +1,1429 @@
+"""Tests for navigation menu system."""
+
+from django.core.exceptions import ValidationError
+from django.test import RequestFactory, TestCase
+from wagtail.models import Locale, Site
+from wagtail.test.utils import WagtailTestUtils
+
+from content.models import ContentPage
+from home.models import HomePage
+from navigation.blocks import DropdownMenuBlock
+from navigation.models import NavigationMenuSetting
+from navigation.templatetags.navigation_tags import process_menu_item
+
+
+class ModelTests(TestCase):
+    """Tests for NavigationMenuSetting model."""
+
+    def setUp(self):
+        """Set up test data."""
+        self.site = Site.objects.get(is_default_site=True)
+        # Ensure a HomePage exists for tests
+        self.home = HomePage.objects.first()
+        if not self.home:
+            # Get the root page
+            root = Site.objects.get(is_default_site=True).root_page
+            self.home = HomePage(
+                title="Test Home Page",
+                slug="home",
+            )
+            root.add_child(instance=self.home)
+            self.home.save_revision().publish()
+
+    def test_create_navigation_menu_setting(self):
+        """Can create navigation menu setting."""
+        menu = NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[],
+        )
+        self.assertEqual(menu.site, self.site)
+        self.assertEqual(len(menu.menu_items), 0)
+
+    def test_navigation_menu_with_page_link(self):
+        """Can create menu with page link."""
+        menu = NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": self.home.id,
+                        "custom_title": "",
+                        "anchor": "",
+                    },
+                },
+            ],
+        )
+        self.assertEqual(len(menu.menu_items), 1)
+        self.assertEqual(menu.menu_items[0].block_type, "page_link")
+
+    def test_navigation_menu_with_external_link(self):
+        """Can create menu with external link."""
+        menu = NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "external_link",
+                    "value": {
+                        "url": "https://example.com",
+                        "title": "Example",
+                        "anchor": "",
+                    },
+                },
+            ],
+        )
+        self.assertEqual(len(menu.menu_items), 1)
+        self.assertEqual(menu.menu_items[0].block_type, "external_link")
+
+    def test_navigation_menu_for_request(self):
+        """Can retrieve navigation menu for a request."""
+        menu = NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[],
+        )
+
+        factory = RequestFactory()
+        request = factory.get("/")
+        request.site = self.site
+
+        retrieved_menu = NavigationMenuSetting.for_request(request)
+        self.assertEqual(retrieved_menu.id, menu.id)
+
+
+class StreamFieldTests(TestCase):
+    """Tests for StreamField block structure and validation."""
+
+    def setUp(self):
+        """Set up test data."""
+        self.site = Site.objects.get(is_default_site=True)
+        # Ensure a HomePage exists for tests
+        self.home = HomePage.objects.first()
+        if not self.home:
+            # Get the root page
+            root = Site.objects.get(is_default_site=True).root_page
+            self.home = HomePage(
+                title="Test Home Page",
+                slug="home",
+            )
+            root.add_child(instance=self.home)
+            self.home.save_revision().publish()
+
+    def test_page_link_block_has_required_fields(self):
+        """PageLinkBlock has page, custom_title, and anchor fields."""
+        menu = NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": self.home.id,
+                        "custom_title": "Home Page",
+                        "anchor": "section",
+                    },
+                },
+            ],
+        )
+        block = menu.menu_items[0]
+        self.assertEqual(block.value["page"].id, self.home.id)
+        self.assertEqual(block.value["custom_title"], "Home Page")
+        self.assertEqual(block.value["anchor"], "section")
+
+    def test_external_link_block_has_required_fields(self):
+        """ExternalLinkBlock has url, title, and anchor fields."""
+        menu = NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "external_link",
+                    "value": {
+                        "url": "https://example.com/docs",
+                        "title": "Documentation",
+                        "anchor": "getting-started",
+                    },
+                },
+            ],
+        )
+        block = menu.menu_items[0]
+        self.assertEqual(block.value["url"], "https://example.com/docs")
+        self.assertEqual(block.value["title"], "Documentation")
+        self.assertEqual(block.value["anchor"], "getting-started")
+
+    def test_dropdown_block_structure(self):
+        """Dropdown menu block contains title and child items."""
+        menu = NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "dropdown",
+                    "value": {
+                        "title": "Resources",
+                        "items": [
+                            {
+                                "type": "page_link",
+                                "value": {
+                                    "page": self.home.id,
+                                    "custom_title": "User Guide",
+                                    "anchor": "",
+                                },
+                            },
+                        ],
+                    },
+                },
+            ],
+        )
+        block = menu.menu_items[0]
+        self.assertEqual(block.block_type, "dropdown")
+        self.assertEqual(block.value["title"], "Resources")
+        self.assertEqual(len(block.value["items"]), 1)
+        self.assertEqual(block.value["items"][0].block_type, "page_link")
+
+    def test_dropdown_block_validates_non_empty_items(self):
+        """Dropdown menu block requires at least one item."""
+        block = DropdownMenuBlock()
+
+        # Empty items should raise validation error
+        with self.assertRaises(ValidationError) as context:
+            block.clean({"title": "Empty Dropdown", "items": []})
+
+        self.assertIn(
+            "Dropdown menu must contain at least one item",
+            str(context.exception),
+        )
+
+
+class IntegrationTests(WagtailTestUtils, TestCase):
+    """Integration tests for end-to-end menu rendering."""
+
+    def setUp(self):
+        """Set up test data."""
+        self.site = Site.objects.get(is_default_site=True)
+        self.locale = Locale.get_default()
+        # Ensure a HomePage exists for tests
+        self.home = HomePage.objects.first()
+        if not self.home:
+            # Get the root page
+            root = Site.objects.get(is_default_site=True).root_page
+            self.home = HomePage(
+                title="Test Home Page",
+                slug="home",
+            )
+            root.add_child(instance=self.home)
+            self.home.save_revision().publish()
+
+    def test_create_menu_with_multiple_items(self):
+        """Can create menu with multiple page and external links."""
+        menu = NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": self.home.id,
+                        "custom_title": "",
+                        "anchor": "",
+                    },
+                },
+                {
+                    "type": "external_link",
+                    "value": {
+                        "url": "https://example.com",
+                        "title": "Example",
+                        "anchor": "",
+                    },
+                },
+            ],
+        )
+
+        self.assertEqual(len(menu.menu_items), 2)
+        self.assertEqual(menu.menu_items[0].block_type, "page_link")
+        self.assertEqual(menu.menu_items[1].block_type, "external_link")
+
+
+class TemplateTagTests(WagtailTestUtils, TestCase):
+    """Tests for navigation template tags."""
+
+    def setUp(self):
+        """Set up test data."""
+        self.factory = RequestFactory()
+        self.site = Site.objects.get(is_default_site=True)
+        self.default_locale = Locale.get_default()
+
+        # Ensure a HomePage exists for tests
+        self.home = HomePage.objects.first()
+        if not self.home:
+            # Get the root page
+            root = Site.objects.get(is_default_site=True).root_page
+            self.home = HomePage(
+                title="Test Home Page",
+                slug="home",
+                locale=self.default_locale,
+            )
+            root.add_child(instance=self.home)
+            self.home.save_revision().publish()
+
+        # Create a content page for testing
+        self.about_page = ContentPage(
+            title="About",
+            slug="about",
+            locale=self.default_locale,
+        )
+        self.home.add_child(instance=self.about_page)
+        self.about_page.save_revision().publish()
+
+    def _create_mock_block(self, block_type, value):
+        """Helper to create mock block values for testing."""
+
+        class MockBlockValue:
+            def __init__(self, bt, val):
+                self.block_type = bt
+                self.value = val
+
+        return MockBlockValue(block_type, value)
+
+    def test_process_menu_item_page_link(self):
+        """Process page link returns correct structure."""
+        value = {
+            "page": self.home,
+            "custom_title": "Custom Home",
+            "anchor": "top",
+        }
+
+        item = self._create_mock_block("page_link", value)
+
+        result = process_menu_item(
+            item,
+            self.default_locale,
+            self.default_locale,
+            self.home,
+        )
+
+        self.assertEqual(result["type"], "page_link")
+        self.assertEqual(result["title"], "Custom Home")
+        self.assertIn("#top", result["url"])
+        self.assertTrue(result["is_current"])
+
+    def test_process_menu_item_page_link_without_custom_title(self):
+        """Process page link uses page title when custom title is empty."""
+        value = {
+            "page": self.home,
+            "custom_title": "",
+            "anchor": "",
+        }
+
+        item = self._create_mock_block("page_link", value)
+
+        result = process_menu_item(
+            item,
+            self.default_locale,
+            self.default_locale,
+        )
+
+        self.assertEqual(result["title"], self.home.title)
+        self.assertFalse(result["is_current"])
+
+    def test_process_menu_item_external_link(self):
+        """Process external link returns correct structure."""
+        value = {
+            "url": "https://example.com",
+            "title": "Example Site",
+            "anchor": "section",
+        }
+
+        item = self._create_mock_block("external_link", value)
+
+        result = process_menu_item(
+            item,
+            self.default_locale,
+            self.default_locale,
+        )
+
+        self.assertEqual(result["type"], "external_link")
+        self.assertEqual(result["url"], "https://example.com#section")
+        self.assertEqual(result["title"], "Example Site")
+        self.assertFalse(result["is_current"])
+
+    def test_process_menu_item_external_link_without_anchor(self):
+        """Process external link works without anchor."""
+        value = {
+            "url": "https://example.com",
+            "title": "Example",
+            "anchor": "",
+        }
+
+        item = self._create_mock_block("external_link", value)
+
+        result = process_menu_item(
+            item,
+            self.default_locale,
+            self.default_locale,
+        )
+
+        self.assertEqual(result["url"], "https://example.com")
+
+    def test_process_menu_item_dropdown(self):
+        """Process dropdown with children."""
+        page_value = {
+            "page": self.about_page,
+            "custom_title": "",
+            "anchor": "",
+        }
+
+        child_item = self._create_mock_block("page_link", page_value)
+
+        dropdown_value = {
+            "title": "Resources",
+            "items": [child_item],
+        }
+
+        dropdown_item = self._create_mock_block("dropdown", dropdown_value)
+
+        result = process_menu_item(
+            dropdown_item,
+            self.default_locale,
+            self.default_locale,
+        )
+
+        self.assertEqual(result["type"], "dropdown")
+        self.assertEqual(result["title"], "Resources")
+        self.assertEqual(len(result["items"]), 1)
+        self.assertEqual(result["items"][0]["type"], "page_link")
+        self.assertFalse(result["is_open"])
+
+    def test_process_menu_item_dropdown_with_current_page(self):
+        """Process dropdown marks is_open when contains current page."""
+        page_value = {
+            "page": self.about_page,
+            "custom_title": "",
+            "anchor": "",
+        }
+
+        child_item = self._create_mock_block("page_link", page_value)
+
+        dropdown_value = {
+            "title": "Resources",
+            "items": [child_item],
+        }
+
+        dropdown_item = self._create_mock_block("dropdown", dropdown_value)
+
+        result = process_menu_item(
+            dropdown_item,
+            self.default_locale,
+            self.default_locale,
+            self.about_page,  # Current page
+        )
+
+        self.assertTrue(result["is_open"])
+
+    def test_process_menu_item_dropdown_empty_children(self):
+        """Process dropdown returns None when all children are invalid."""
+        dropdown_value = {
+            "title": "Empty Dropdown",
+            "items": [],
+        }
+
+        dropdown_item = self._create_mock_block("dropdown", dropdown_value)
+
+        result = process_menu_item(
+            dropdown_item,
+            self.default_locale,
+            self.default_locale,
+        )
+
+        self.assertIsNone(result)
+
+    def test_process_menu_item_page_link_unpublished_page(self):
+        """Process page link returns None for unpublished page."""
+        # Create unpublished page
+        unpublished_page = ContentPage(
+            title="Draft",
+            slug="draft",
+            locale=self.default_locale,
+            live=False,
+        )
+        self.home.add_child(instance=unpublished_page)
+
+        value = {
+            "page": unpublished_page,
+            "custom_title": "",
+            "anchor": "",
+        }
+
+        item = self._create_mock_block("page_link", value)
+
+        result = process_menu_item(
+            item,
+            self.default_locale,
+            self.default_locale,
+        )
+
+        self.assertIsNone(result)
+
+    def test_process_menu_item_page_link_none_page(self):
+        """Process page link returns None when page is None."""
+        value = {
+            "page": None,
+            "custom_title": "",
+            "anchor": "",
+        }
+
+        item = self._create_mock_block("page_link", value)
+
+        result = process_menu_item(
+            item,
+            self.default_locale,
+            self.default_locale,
+        )
+
+        self.assertIsNone(result)
+
+    def test_process_menu_item_unknown_type(self):
+        """Process menu item returns None for unknown type."""
+        value = {}
+
+        item = self._create_mock_block("unknown_type", value)
+
+        result = process_menu_item(
+            item,
+            self.default_locale,
+            self.default_locale,
+        )
+
+        self.assertIsNone(result)
+
+    def test_navigation_menu_tag_with_empty_menu(self):
+        """Navigation menu tag returns empty list when no menu items."""
+        NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[],
+        )
+
+        request = self.factory.get("/")
+        request.site = self.site
+
+        from django.template import Context, Template
+
+        template = Template("{% load navigation_tags %}{% navigation_menu %}")
+        context = Context({"request": request, "page": self.home})
+
+        # Should not raise error
+        result = template.render(context)
+        self.assertIsNotNone(result)
+
+    def test_navigation_menu_tag_without_settings(self):
+        """Navigation menu tag handles missing settings gracefully."""
+        request = self.factory.get("/")
+        request.site = self.site
+
+        from django.template import Context, Template
+
+        # Delete any existing settings
+        NavigationMenuSetting.objects.filter(site=self.site).delete()
+
+        template = Template("{% load navigation_tags %}{% navigation_menu %}")
+        context = Context({"request": request, "page": self.home})
+
+        # Should not raise error
+        result = template.render(context)
+        self.assertIsNotNone(result)
+
+    def test_navigation_menu_tag_renders_page_links(self):
+        """Navigation menu tag renders page links correctly."""
+        NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": self.home.id,
+                        "custom_title": "Home",
+                        "anchor": "",
+                    },
+                },
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": self.about_page.id,
+                        "custom_title": "",
+                        "anchor": "section",
+                    },
+                },
+            ],
+        )
+
+        request = self.factory.get("/")
+        request.site = self.site
+
+        from django.template import Context, Template
+
+        template = Template("{% load navigation_tags %}{% navigation_menu %}")
+        context = Context({"request": request, "page": self.home})
+
+        result = template.render(context)
+        self.assertIn("Home", result)
+        self.assertIn("About", result)
+
+    def test_navigation_menu_tag_renders_external_links(self):
+        """Navigation menu tag renders external links correctly."""
+        NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "external_link",
+                    "value": {
+                        "url": "https://example.com",
+                        "title": "Example Site",
+                        "anchor": "",
+                    },
+                },
+            ],
+        )
+
+        request = self.factory.get("/")
+        request.site = self.site
+
+        from django.template import Context, Template
+
+        template = Template("{% load navigation_tags %}{% navigation_menu %}")
+        context = Context({"request": request, "page": self.home})
+
+        result = template.render(context)
+        self.assertIn("Example Site", result)
+        self.assertIn("https://example.com", result)
+
+    def test_navigation_menu_tag_renders_dropdowns(self):
+        """Navigation menu tag renders dropdown menus correctly."""
+        NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "dropdown",
+                    "value": {
+                        "title": "Resources",
+                        "items": [
+                            {
+                                "type": "page_link",
+                                "value": {
+                                    "page": self.about_page.id,
+                                    "custom_title": "About Us",
+                                    "anchor": "",
+                                },
+                            },
+                            {
+                                "type": "external_link",
+                                "value": {
+                                    "url": "https://docs.example.com",
+                                    "title": "Documentation",
+                                    "anchor": "",
+                                },
+                            },
+                        ],
+                    },
+                },
+            ],
+        )
+
+        request = self.factory.get("/")
+        request.site = self.site
+
+        from django.template import Context, Template
+
+        template = Template("{% load navigation_tags %}{% navigation_menu %}")
+        context = Context({"request": request, "page": self.home})
+
+        result = template.render(context)
+        self.assertIn("Resources", result)
+        self.assertIn("About Us", result)
+        self.assertIn("Documentation", result)
+
+    def test_navigation_menu_tag_marks_current_page(self):
+        """Navigation menu tag marks current page correctly."""
+        NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": self.home.id,
+                        "custom_title": "Home",
+                        "anchor": "",
+                    },
+                },
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": self.about_page.id,
+                        "custom_title": "About",
+                        "anchor": "",
+                    },
+                },
+            ],
+        )
+
+        request = self.factory.get("/about/")
+        request.site = self.site
+
+        from django.template import Context, Template
+
+        template = Template("{% load navigation_tags %}{% navigation_menu %}")
+        context = Context({"request": request, "page": self.about_page})
+
+        result = template.render(context)
+        self.assertIn('aria-current="page"', result)
+
+    def test_navigation_menu_tag_filters_unpublished_pages(self):
+        """Navigation menu tag filters out unpublished pages."""
+        # Create unpublished page
+        draft_page = ContentPage(
+            title="Draft",
+            slug="draft",
+            locale=self.default_locale,
+            live=False,
+        )
+        self.home.add_child(instance=draft_page)
+
+        NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": draft_page.id,
+                        "custom_title": "Draft",
+                        "anchor": "",
+                    },
+                },
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": self.about_page.id,
+                        "custom_title": "About",
+                        "anchor": "",
+                    },
+                },
+            ],
+        )
+
+        request = self.factory.get("/")
+        request.site = self.site
+
+        from django.template import Context, Template
+
+        template = Template("{% load navigation_tags %}{% navigation_menu %}")
+        context = Context({"request": request, "page": self.home})
+
+        result = template.render(context)
+        # Draft should not appear
+        self.assertNotIn("Draft", result)
+        # Published page should appear
+        self.assertIn("About", result)
+
+
+class TranslationTests(WagtailTestUtils, TestCase):
+    """Tests for navigation menu translation and multi-lingual support."""
+
+    def setUp(self):
+        """Set up test data with multiple locales."""
+        self.site = Site.objects.get(is_default_site=True)
+        self.locale_en = Locale.get_default()
+        self.locale_es, _ = Locale.objects.get_or_create(language_code="es")
+        self.locale_fr, _ = Locale.objects.get_or_create(language_code="fr")
+
+        # Get the English home page and create translations
+        self.home_en = HomePage.objects.first()
+
+        # Create Spanish home page translation
+        self.home_es = self.home_en.copy_for_translation(self.locale_es)
+        self.home_es.title = "Inicio"
+        self.home_es.save_revision().publish()
+
+        # Create French home page translation
+        self.home_fr = self.home_en.copy_for_translation(self.locale_fr)
+        self.home_fr.title = "Accueil"
+        self.home_fr.save_revision().publish()
+
+        # Create an English page
+        self.page_en = ContentPage(
+            title="About Us",
+            slug="about-us",
+            locale=self.locale_en,
+            body=[
+                {
+                    "type": "rich_text",
+                    "value": "<p>Welcome to our community.</p>",
+                },
+            ],
+        )
+        self.home_en.add_child(instance=self.page_en)
+        self.page_en.save_revision().publish()
+
+        # Create Spanish translation
+        self.page_es = self.page_en.copy_for_translation(self.locale_es)
+        self.page_es.title = "Sobre Nosotros"
+        self.page_es.body = [
+            {
+                "type": "rich_text",
+                "value": "<p>Bienvenido a nuestra comunidad.</p>",
+            },
+        ]
+        self.page_es.save_revision().publish()
+
+        # Create French translation
+        self.page_fr = self.page_en.copy_for_translation(self.locale_fr)
+        self.page_fr.title = "À Propos de Nous"
+        self.page_fr.body = [
+            {
+                "type": "rich_text",
+                "value": "<p>Bienvenue dans notre communauté.</p>",
+            },
+        ]
+        self.page_fr.save_revision().publish()
+
+        # Create navigation menu with the English page
+        self.nav_settings = NavigationMenuSetting.objects.create(
+            site=self.site,
+            menu_items=[
+                {
+                    "type": "page_link",
+                    "value": {
+                        "page": self.page_en.id,
+                        "custom_title": "",
+                        "anchor": "",
+                    },
+                },
+            ],
+        )
+
+    def test_menu_displays_translated_page_in_current_locale(self):
+        """Menu items display pages in current locale."""
+        # Test with Spanish locale
+        with self.activate_locale(self.locale_es):
+            item = self.nav_settings.menu_items[0]
+            result = process_menu_item(
+                item,
+                self.locale_es,
+                self.locale_en,
+            )
+
+            self.assertIsNotNone(result)
+            self.assertEqual(result["type"], "page_link")
+            self.assertEqual(result["title"], "Sobre Nosotros")
+            self.assertEqual(result["page"].id, self.page_es.id)
+            self.assertEqual(result["page"].locale, self.locale_es)
+
+    def test_menu_displays_translated_page_in_french_locale(self):
+        """Menu items display pages in French locale."""
+        # Test with French locale
+        with self.activate_locale(self.locale_fr):
+            item = self.nav_settings.menu_items[0]
+            result = process_menu_item(
+                item,
+                self.locale_fr,
+                self.locale_en,
+            )
+
+            self.assertIsNotNone(result)
+            self.assertEqual(result["type"], "page_link")
+            self.assertEqual(result["title"], "À Propos de Nous")
+            self.assertEqual(result["page"].id, self.page_fr.id)
+            self.assertEqual(result["page"].locale, self.locale_fr)
+
+    def test_menu_falls_back_to_default_locale(self):
+        """Menu falls back to default locale when translation unavailable."""
+        # Create a new locale without translation
+        locale_de, _ = Locale.objects.get_or_create(language_code="de")
+
+        # Try to get menu item in German (no translation exists)
+        item = self.nav_settings.menu_items[0]
+        result = process_menu_item(
+            item,
+            locale_de,
+            self.locale_en,
+        )
+
+        # Should fall back to English
+        self.assertIsNotNone(result)
+        self.assertEqual(result["type"], "page_link")
+        self.assertEqual(result["title"], "About Us")
+        self.assertEqual(result["page"].id, self.page_en.id)
+        self.assertEqual(result["page"].locale, self.locale_en)
+
+    def test_dropdown_items_respect_locale(self):
+        """Dropdown menu items are translated correctly."""
+        # Create a parent page in English
+        programs_en = ContentPage(
+            title="Programs",
+            slug="programs",
+            locale=self.locale_en,
+        )
+        self.home_en.add_child(instance=programs_en)
+        programs_en.save_revision().publish()
+
+        # Create Spanish translation
+        programs_es = programs_en.copy_for_translation(self.locale_es)
+        programs_es.title = "Programas"
+        programs_es.save_revision().publish()
+
+        # Update navigation with dropdown
+        self.nav_settings.menu_items = [
+            {
+                "type": "dropdown",
+                "value": {
+                    "title": "Resources",
+                    "items": [
+                        {
+                            "type": "page_link",
+                            "value": {
+                                "page": self.page_en.id,
+                                "custom_title": "",
+                                "anchor": "",
+                            },
+                        },
+                        {
+                            "type": "page_link",
+                            "value": {
+                                "page": programs_en.id,
+                                "custom_title": "",
+                                "anchor": "",
+                            },
+                        },
+                    ],
+                },
+            },
+        ]
+        self.nav_settings.save()
+
+        # Test with Spanish locale
+        item = self.nav_settings.menu_items[0]
+        result = process_menu_item(
+            item,
+            self.locale_es,
+            self.locale_en,
+        )
+
+        self.assertIsNotNone(result)
+        self.assertEqual(result["type"], "dropdown")
+        self.assertEqual(len(result["items"]), 2)
+
+        # Check first child is Spanish translation
+        self.assertEqual(result["items"][0]["title"], "Sobre Nosotros")
+        self.assertEqual(result["items"][0]["page"].locale, self.locale_es)
+
+        # Check second child is Spanish translation
+        self.assertEqual(result["items"][1]["title"], "Programas")
+        self.assertEqual(result["items"][1]["page"].locale, self.locale_es)
+
+    def test_unpublished_translation_not_shown(self):
+        """Unpublished translations are not shown in menu."""
+        # Create a draft Spanish page (unpublished)
+        draft_page_en = ContentPage(
+            title="Draft Page",
+            slug="draft-page",
+            locale=self.locale_en,
+        )
+        self.home_en.add_child(instance=draft_page_en)
+        draft_page_en.save_revision().publish()
+
+        # Create Spanish translation but don't publish it
+        draft_page_es = draft_page_en.copy_for_translation(self.locale_es)
+        draft_page_es.title = "Página de Borrador"
+        draft_page_es.live = False
+        draft_page_es.save_revision()  # Save but don't publish
+
+        # Update navigation with this page
+        self.nav_settings.menu_items = [
+            {
+                "type": "page_link",
+                "value": {
+                    "page": draft_page_en.id,
+                    "custom_title": "",
+                    "anchor": "",
+                },
+            },
+        ]
+        self.nav_settings.save()
+
+        # Try to get menu item in Spanish
+        item = self.nav_settings.menu_items[0]
+        result = process_menu_item(
+            item,
+            self.locale_es,
+            self.locale_en,
+        )
+
+        # Should return None since the Spanish translation exists but is unpublished
+        # This prevents showing stale content in the wrong language
+        self.assertIsNone(result)
+
+    def test_custom_title_used_regardless_of_locale(self):
+        """Custom title is used instead of translated page title."""
+        # Update navigation with custom title
+        self.nav_settings.menu_items = [
+            {
+                "type": "page_link",
+                "value": {
+                    "page": self.page_en.id,
+                    "custom_title": "Custom Title",
+                    "anchor": "",
+                },
+            },
+        ]
+        self.nav_settings.save()
+
+        # Test with Spanish locale
+        item = self.nav_settings.menu_items[0]
+        result = process_menu_item(
+            item,
+            self.locale_es,
+            self.locale_en,
+        )
+
+        # Should use custom title, not translated title
+        self.assertEqual(result["title"], "Custom Title")
+        # But page should still be Spanish
+        self.assertEqual(result["page"].locale, self.locale_es)
+
+    def test_navigation_menu_tag_respects_active_locale(self):
+        """Navigation menu template tag uses active locale."""
+        from django.template import Context, Template
+
+        factory = RequestFactory()
+        request = factory.get("/")
+        request.site = self.site
+
+        # Activate Spanish locale
+        with self.activate_locale(self.locale_es):
+            template = Template("{% load navigation_tags %}{% navigation_menu %}")
+            context = Context({"request": request, "page": self.home_en})
+
+            result = template.render(context)
+
+            # Should show Spanish title
+            self.assertIn("Sobre Nosotros", result)
+            self.assertNotIn("About Us", result)
+
+    def test_mixed_locale_dropdown_with_fallback(self):
+        """Dropdown handles mix of available and unavailable translations."""
+        # Create another English page without Spanish translation
+        no_translation_page = ContentPage(
+            title="English Only",
+            slug="english-only",
+            locale=self.locale_en,
+        )
+        self.home_en.add_child(instance=no_translation_page)
+        no_translation_page.save_revision().publish()
+
+        # Create dropdown with both pages
+        self.nav_settings.menu_items = [
+            {
+                "type": "dropdown",
+                "value": {
+                    "title": "Mixed",
+                    "items": [
+                        {
+                            "type": "page_link",
+                            "value": {
+                                "page": self.page_en.id,
+                                "custom_title": "",
+                                "anchor": "",
+                            },
+                        },
+                        {
+                            "type": "page_link",
+                            "value": {
+                                "page": no_translation_page.id,
+                                "custom_title": "",
+                                "anchor": "",
+                            },
+                        },
+                    ],
+                },
+            },
+        ]
+        self.nav_settings.save()
+
+        # Test with Spanish locale
+        item = self.nav_settings.menu_items[0]
+        result = process_menu_item(
+            item,
+            self.locale_es,
+            self.locale_en,
+        )
+
+        self.assertEqual(len(result["items"]), 2)
+        # First item should be Spanish
+        self.assertEqual(result["items"][0]["title"], "Sobre Nosotros")
+        self.assertEqual(result["items"][0]["page"].locale, self.locale_es)
+        # Second item should fall back to English
+        self.assertEqual(result["items"][1]["title"], "English Only")
+        self.assertEqual(result["items"][1]["page"].locale, self.locale_en)
+
+    def activate_locale(self, locale):
+        """Context manager to activate a specific locale."""
+        from unittest.mock import patch
+
+        return patch("wagtail.models.Locale.get_active", return_value=locale)
+
+
+class ManagementCommandTests(WagtailTestUtils, TestCase):
+    """Tests for navigation management commands."""
+
+    def setUp(self):
+        """Set up test data."""
+        self.site = Site.objects.get(is_default_site=True)
+        self.locale = Locale.get_default()
+
+        # Ensure a HomePage exists for tests
+        self.home = HomePage.objects.first()
+        if not self.home:
+            # Get the root page
+            root = Site.objects.get(is_default_site=True).root_page
+            self.home = HomePage(
+                title="Test Home Page",
+                slug="home",
+                locale=self.locale,
+            )
+            root.add_child(instance=self.home)
+            self.home.save_revision().publish()
+
+    def test_scaffold_navbar_content_creates_pages(self):
+        """Scaffold command creates sample pages."""
+        from io import StringIO
+
+        from django.core.management import call_command
+
+        out = StringIO()
+        call_command("scaffold_navbar_content", "--skip-menu", stdout=out)
+
+        # Check that pages were created
+        self.assertTrue(ContentPage.objects.filter(title="About").exists())
+        self.assertTrue(ContentPage.objects.filter(title="Programs").exists())
+        self.assertTrue(ContentPage.objects.filter(title="Contact").exists())
+        self.assertTrue(ContentPage.objects.filter(title="Adult Education").exists())
+        self.assertTrue(ContentPage.objects.filter(title="Youth Programs").exists())
+
+        output = out.getvalue()
+        self.assertIn("Successfully scaffolded", output)
+
+    def test_scaffold_navbar_content_creates_navigation_menu(self):
+        """Scaffold command creates navigation menu."""
+        from io import StringIO
+
+        from django.core.management import call_command
+
+        out = StringIO()
+        call_command("scaffold_navbar_content", stdout=out)
+
+        # Check navigation menu was created
+        nav_settings = NavigationMenuSetting.for_site(self.site)
+        self.assertIsNotNone(nav_settings)
+        self.assertGreater(len(nav_settings.menu_items), 0)
+
+        # Check for specific menu items
+        menu_types = [item.block_type for item in nav_settings.menu_items]
+        self.assertIn("page_link", menu_types)
+        self.assertIn("dropdown", menu_types)
+        self.assertIn("external_link", menu_types)
+
+    def test_scaffold_navbar_content_delete_option(self):
+        """Scaffold command with --delete removes existing content."""
+        from io import StringIO
+
+        from django.core.management import call_command
+
+        # Create initial content
+        call_command("scaffold_navbar_content", stdout=StringIO())
+
+        # Verify content exists
+        about_page = ContentPage.objects.filter(title="About").first()
+        self.assertIsNotNone(about_page)
+        initial_id = about_page.id
+
+        # Run with --delete
+        out = StringIO()
+        call_command("scaffold_navbar_content", "--delete", stdout=out)
+
+        # Verify old content was deleted and new content created
+        new_about_page = ContentPage.objects.filter(title="About").first()
+        self.assertIsNotNone(new_about_page)
+        self.assertNotEqual(initial_id, new_about_page.id)
+
+        output = out.getvalue()
+        self.assertIn("Deleted", output)
+
+    def test_scaffold_navbar_content_delete_only_scaffolded_pages(self):
+        """Scaffold command with --delete only removes scaffolded pages, not all pages."""
+        from io import StringIO
+
+        from django.core.management import call_command
+
+        # Create a non-scaffolded page that should NOT be deleted
+        user_page = ContentPage(
+            title="User Created Page",
+            slug="user-page",
+            locale=self.locale,
+            body=[
+                {
+                    "type": "rich_text",
+                    "value": "<p>This is a user-created page.</p>",
+                },
+            ],
+        )
+        self.home.add_child(instance=user_page)
+        user_page.save_revision().publish()
+        user_page_id = user_page.id
+
+        # Create scaffolded content
+        call_command("scaffold_navbar_content", stdout=StringIO())
+
+        # Verify both scaffolded and user pages exist
+        self.assertTrue(ContentPage.objects.filter(title="About").exists())
+        self.assertTrue(ContentPage.objects.filter(title="User Created Page").exists())
+
+        # Run with --delete
+        out = StringIO()
+        call_command("scaffold_navbar_content", "--delete", stdout=out)
+
+        # Verify user page still exists (not deleted)
+        user_page_after = ContentPage.objects.filter(id=user_page_id).first()
+        self.assertIsNotNone(
+            user_page_after,
+            "User-created page should NOT be deleted by scaffold command",
+        )
+        self.assertEqual(user_page_after.title, "User Created Page")
+
+        # Verify scaffolded pages were recreated (different IDs)
+        new_about_page = ContentPage.objects.filter(title="About").first()
+        self.assertIsNotNone(new_about_page)
+
+        output = out.getvalue()
+        self.assertIn("Deleted", output)
+
+    def test_scaffold_navbar_content_delete_removes_descendants(self):
+        """Scaffold command with --delete removes scaffolded pages and their descendants."""
+        from io import StringIO
+
+        from django.core.management import call_command
+
+        # Create scaffolded content
+        call_command("scaffold_navbar_content", stdout=StringIO())
+
+        # Verify Programs page and its children exist
+        programs_page = ContentPage.objects.filter(title="Programs").first()
+        self.assertIsNotNone(programs_page)
+        self.assertTrue(ContentPage.objects.filter(title="Adult Education").exists())
+        self.assertTrue(ContentPage.objects.filter(title="Youth Programs").exists())
+
+        programs_page_id = programs_page.id
+        adult_ed_page = ContentPage.objects.filter(title="Adult Education").first()
+        adult_ed_id = adult_ed_page.id
+
+        # Run with --delete
+        out = StringIO()
+        call_command("scaffold_navbar_content", "--delete", stdout=out)
+
+        # Verify old Programs page and its descendants were deleted
+        self.assertFalse(
+            ContentPage.objects.filter(id=programs_page_id).exists(),
+            "Old Programs page should be deleted",
+        )
+        self.assertFalse(
+            ContentPage.objects.filter(id=adult_ed_id).exists(),
+            "Descendants of Programs page should be deleted",
+        )
+
+        # Verify new Programs page and children were created
+        new_programs_page = ContentPage.objects.filter(title="Programs").first()
+        self.assertIsNotNone(new_programs_page)
+        self.assertNotEqual(new_programs_page.id, programs_page_id)
+        self.assertTrue(ContentPage.objects.filter(title="Adult Education").exists())
+        self.assertTrue(ContentPage.objects.filter(title="Youth Programs").exists())
+
+        output = out.getvalue()
+        self.assertIn("Deleted", output)
+
+    def test_scaffold_navbar_content_delete_with_no_existing_content(self):
+        """Scaffold command with --delete works when no scaffolded pages exist."""
+        from io import StringIO
+
+        from django.core.management import call_command
+
+        # Ensure no scaffolded pages exist
+        ContentPage.objects.filter(
+            slug__in=["dev_about", "dev_programs", "dev_contact"],
+        ).delete()
+
+        # Run with --delete (should not error)
+        out = StringIO()
+        call_command("scaffold_navbar_content", "--delete", stdout=out)
+
+        # Verify pages were created
+        self.assertTrue(ContentPage.objects.filter(title="About").exists())
+        self.assertTrue(ContentPage.objects.filter(title="Programs").exists())
+        self.assertTrue(ContentPage.objects.filter(title="Contact").exists())
+
+        output = out.getvalue()
+        # Should not say "Deleted" since nothing was deleted
+        self.assertNotIn("Deleted", output)
+
+    def test_scaffold_navbar_content_is_idempotent(self):
+        """Scaffold command can be run multiple times without --delete (idempotent)."""
+        from io import StringIO
+
+        from django.core.management import call_command
+
+        # Run scaffold command first time
+        call_command("scaffold_navbar_content", stdout=StringIO())
+
+        # Verify initial content exists
+        about_page = ContentPage.objects.filter(slug="dev_about").first()
+        programs_page = ContentPage.objects.filter(slug="dev_programs").first()
+        contact_page = ContentPage.objects.filter(slug="dev_contact").first()
+        adult_ed_page = ContentPage.objects.filter(slug="dev_adult-education").first()
+
+        self.assertIsNotNone(about_page)
+        self.assertIsNotNone(programs_page)
+        self.assertIsNotNone(contact_page)
+        self.assertIsNotNone(adult_ed_page)
+
+        # Store IDs to verify they don't change
+        about_id = about_page.id
+        programs_id = programs_page.id
+        contact_id = contact_page.id
+        adult_ed_id = adult_ed_page.id
+
+        # Run scaffold command second time WITHOUT --delete
+        # This should reuse existing pages, not create duplicates or fail
+        out = StringIO()
+        call_command("scaffold_navbar_content", stdout=out)
+
+        # Verify pages still exist with SAME IDs (reused, not recreated)
+        about_page_after = ContentPage.objects.filter(slug="dev_about").first()
+        programs_page_after = ContentPage.objects.filter(slug="dev_programs").first()
+        contact_page_after = ContentPage.objects.filter(slug="dev_contact").first()
+        adult_ed_page_after = ContentPage.objects.filter(
+            slug="dev_adult-education",
+        ).first()
+
+        self.assertIsNotNone(about_page_after)
+        self.assertIsNotNone(programs_page_after)
+        self.assertIsNotNone(contact_page_after)
+        self.assertIsNotNone(adult_ed_page_after)
+
+        # Verify IDs are the same (pages were reused, not recreated)
+        self.assertEqual(about_page_after.id, about_id)
+        self.assertEqual(programs_page_after.id, programs_id)
+        self.assertEqual(contact_page_after.id, contact_id)
+        self.assertEqual(adult_ed_page_after.id, adult_ed_id)
+
+        # Verify no duplicate pages were created
+        self.assertEqual(ContentPage.objects.filter(slug="dev_about").count(), 1)
+        self.assertEqual(ContentPage.objects.filter(slug="dev_programs").count(), 1)
+        self.assertEqual(ContentPage.objects.filter(slug="dev_contact").count(), 1)
+        self.assertEqual(
+            ContentPage.objects.filter(slug="dev_adult-education").count(),
+            1,
+        )
+
+        output = out.getvalue()
+        # On second run, all pages should be reused (not created)
+        self.assertIn("Created 0 pages, reused 5 pages", output)
+
+    def test_scaffold_navbar_content_no_site_error(self):
+        """Scaffold command fails gracefully with no site."""
+        from io import StringIO
+
+        from django.core.management import CommandError, call_command
+
+        # Delete the default site
+        Site.objects.all().delete()
+
+        with self.assertRaises(CommandError) as context:
+            call_command("scaffold_navbar_content", stdout=StringIO())
+
+        self.assertIn("No default site found", str(context.exception))
+
+    def test_scaffold_navbar_content_skips_existing_menu(self):
+        """Scaffold command skips menu update when menu already exists (without --force-menu)."""
+        from io import StringIO
+
+        from django.core.management import call_command
+
+        # First run - creates menu
+        call_command("scaffold_navbar_content", stdout=StringIO())
+
+        # Get nav settings
+        nav_settings = NavigationMenuSetting.for_site(self.site)
+
+        # Modify the menu to simulate manual changes
+        nav_settings.menu_items = [
+            {
+                "type": "external_link",
+                "value": {
+                    "url": "https://example.com",
+                    "title": "Custom Link",
+                    "anchor": "",
+                },
+                "id": "custom-link",
+            },
+        ]
+        nav_settings.save()
+
+        # Second run - should skip menu update
+        out = StringIO()
+        call_command("scaffold_navbar_content", stdout=out)
+
+        # Verify menu was NOT overwritten
+        nav_settings.refresh_from_db()
+        self.assertEqual(len(nav_settings.menu_items), 1)
+        self.assertEqual(nav_settings.menu_items[0].block_type, "external_link")
+        self.assertEqual(nav_settings.menu_items[0].value["title"], "Custom Link")
+
+        # Check warning message
+        output = out.getvalue()
+        self.assertIn("Navigation menu already exists", output)
+        self.assertIn("Use --force-menu to overwrite", output)
+
+    def test_scaffold_navbar_content_force_menu_overwrites(self):
+        """Scaffold command with --force-menu overwrites existing menu."""
+        from io import StringIO
+
+        from django.core.management import call_command
+
+        # First run - creates menu
+        call_command("scaffold_navbar_content", stdout=StringIO())
+
+        # Get initial menu
+        nav_settings = NavigationMenuSetting.for_site(self.site)
+
+        # Modify the menu to simulate manual changes
+        nav_settings.menu_items = [
+            {
+                "type": "external_link",
+                "value": {
+                    "url": "https://example.com",
+                    "title": "Custom Link",
+                    "anchor": "",
+                },
+                "id": "custom-link",
+            },
+        ]
+        nav_settings.save()
+
+        # Second run with --force-menu - should overwrite
+        out = StringIO()
+        call_command("scaffold_navbar_content", "--force-menu", stdout=out)
+
+        # Verify menu WAS overwritten
+        nav_settings.refresh_from_db()
+        self.assertGreater(len(nav_settings.menu_items), 1)
+
+        # Check for scaffold menu items
+        menu_types = [item.block_type for item in nav_settings.menu_items]
+        self.assertIn("page_link", menu_types)
+        self.assertIn("dropdown", menu_types)
+
+        # Check success message (no warning)
+        output = out.getvalue()
+        self.assertIn("Updated NavigationMenuSetting", output)
+        self.assertNotIn("already exists", output)
diff --git a/src/navigation/views.py b/src/navigation/views.py
new file mode 100644
index 0000000..71e077d
--- /dev/null
+++ b/src/navigation/views.py
@@ -0,0 +1,3 @@
+"""Views for navigation app (not used - menu rendered via template tag)."""
+
+# Navigation menu is rendered via template tag, no views needed