⚔️CritForge
🧭

Navigation Patterns

Advanced navigation and UI patterns

navigationuipatternsimplementation

Date: 2026-01-24 Status: ✅ Implemented Related Design Proposal: docs/design/style-guide.md

Overview

Successfully implemented Pattern A (Grouped Dropdown Navigation) from the approved design proposal, addressing the navigation scalability crisis as CritForge expands from 4 to 16+ content types.

What Was Implemented

1. Desktop Navigation (Header)

Before:

⚔️ CritForge | Generate | Encounters | [Create Character] | Dashboard | 👤

After:

⚔️ CritForge | [Create ▾] | [Library ▾] | Dashboard | 👤
Create Menu Dropdown

  • Core Content Section:

    • ⚔️ NPC - Generate full stat block with personality
    • 📜 Plot - Multi-scene narrative with NPCs and encounters
    • 🎲 Encounter - Balance combat encounters
    • 🗺️ Map - Scene with points of interest and secrets

  • Rewards & Challenges Section:

    • 💎 Treasure - Generate loot tables (Coming Soon)
    • ⚙️ Traps - Design hazards (Coming Soon)
    • 🎁 Magic Items - Custom magic items (Coming Soon)
    • 📋 Random Tables - Custom dice tables (Coming Soon)

  • Legendary Section:

    • ✨ Deities 🔒 - CR 20-30 divine entity with legendary actions (Premium)
    • 🦸 Legendary Heroes 🔒 - CR 15-25 epic hero with signature weapon (Premium)
Library Menu Dropdown
  • 📚 All Content - Browse everything
  • ⚔️ NPCs - Your characters
  • 📜 Plots - Your stories
  • 🎲 Encounters - Your battles
  • 🗺️ Maps - Your locations

2. Mobile Navigation (Drawer)

Before: Flat list of 7 items

After: Organized accordion structure with expandable sections:

📊 Dashboard
───────────
▼ CREATE NEW
  ⚔️ NPC
  📜 Plot
  🎲 Encounter
  🗺️ Map
  💎 Treasure (Coming Soon)
  ⚙️ Traps (Coming Soon)
  🎁 Magic Items (Coming Soon)
  📋 Random Tables (Coming Soon)
  ✨ Deities 🔒
  🦸 Legendary Heroes 🔒

▼ MY LIBRARY
  📚 All Content
  ⚔️ NPCs
  📜 Plots
  🎲 Encounters
  🗺️ Maps
───────────
🏰 Campaigns
🛡️ Factions
⚙️ Settings

Files Created

New Components

  1. src/components/navigation/CreateMenu.tsx

    • Desktop dropdown for content creation
    • Semantic grouping (Core, Rewards & Challenges, Legendary)
    • Premium gating with lock icons
    • Disabled state for coming soon items

  2. src/components/navigation/LibraryMenu.tsx

    • Desktop dropdown for content library access
    • Quick filters to Dashboard with type query params

  3. src/components/ui/accordion.tsx

    • Shadcn/ui accordion component (installed via CLI)
    • Used for mobile navigation accordions

Modified Components

  1. src/components/header.tsx

    • Replaced flat navigation links with CreateMenu and LibraryMenu dropdowns
    • Maintained Dashboard link as standalone
    • Removed obsolete "Create Character" button

  2. src/components/navigation/MobileNav.tsx

    • Replaced flat link list with accordion sections
    • Added Dashboard as prominent top-level link
    • Organized CREATE NEW and MY LIBRARY as accordion sections
    • Preserved existing swipe-to-close gesture

Translation Files

  1. src/locales/en-US/common.json
    • Added 20+ new translation keys under nav namespace:
      • create, library, createNew, myLibrary
      • coreContent, rewardsAndChallenges, legendary, premium
      • allContent, browseEverything, yourCharacters, yourStories, etc.
      • Content type descriptions

Technical Patterns Used

1. Radix UI Primitives

  • DropdownMenu - Accessible desktop dropdown with keyboard navigation
  • Accordion - Collapsible mobile sections with smooth animations
  • Both primitives provide built-in ARIA attributes and focus management

2. Translation Support

All text uses next-intl translation keys:

const t = useTranslations('common');
const tContent = useTranslations('common.contentTypeSelector');

// Usage
label: t('nav.create')
description: tContent('npc.description.expert')

3. Premium Gating Pattern

const isLocked = item.premium && !isPremium;
const isDisabled = item.disabled || isLocked;

// Visual indicators
{isLocked && <Lock className="h-3 w-3 text-gold-base" />}

4. Responsive Layout

  • Desktop: Dropdown menus (480px width for Create, 280px for Library)
  • Mobile: Full-height drawer with accordions
  • Shared navigation data structure (DRY principle)

Routes Linked

Generation Pages

  • /generate/npc - NPC Generator
  • /generate/plot - Plot Generator
  • /generate/encounter - Encounter Generator
  • /generate/map-plot - Map Generator
  • /generate/treasure - Treasure Generator (Coming Soon)
  • /generate/trap - Trap Generator (Coming Soon)
  • /generate/magic-item - Magic Item Generator (Coming Soon)
  • /generate/random-table - Random Table Generator (Coming Soon)
  • /generate/deity - Deity Generator (Premium, Phase 1.5)
  • /generate/legendary-hero - Legendary Hero Generator (Premium, Phase 1.5)

Library Pages

  • /dashboard - All content library
  • /dashboard?type=npc - NPCs only
  • /dashboard?type=plot - Plots only
  • /dashboard?type=encounter - Encounters only
  • /dashboard?type=map - Maps only

Other Pages

  • /campaigns - Campaign management
  • /factions - Faction management
  • /settings - User settings

Design System Integration

Colors

  • Premium badges: text-gold-base (design system gold token)
  • Hover states: hover:bg-accent (theme-aware)
  • Section headers: text-muted-foreground (theme-aware)

Typography

  • Section headers: 12px uppercase, tracking-wider
  • Item labels: 14px medium weight
  • Descriptions: 12px regular, muted color

Spacing

  • Dropdown padding: 8px (p-2)
  • Item padding: 12px vertical, 12px horizontal (py-2.5 px-3)
  • Section spacing: 8px gap between items
  • Icon margin: 12px from text

Touch Targets

  • Minimum height: 44px (min-h-11 = 44px)
  • Mobile accordion headers: 48px
  • Meets WCAG 2.1 AA accessibility guidelines

Accessibility Features

Keyboard Navigation

  • Tab to navigate between menu items
  • Arrow keys within dropdowns
  • Escape to close dropdowns
  • Enter/Space to activate items

Screen Reader Support

  • Proper ARIA roles from Radix primitives
  • Descriptive labels for all interactive elements
  • Lock icons have proper semantic meaning

Visual Indicators

  • Focus rings on all interactive elements
  • Disabled state styling (50% opacity)
  • Premium lock icons in gold color

Future Enhancements (Not Implemented)

Recommended Next Steps

  1. Subscription State Integration

    • Replace hardcoded isPremium = false with actual subscription check
    • Hook into useSubscription or similar context
    • Update both CreateMenu and MobileNav

  2. Upgrade Modal for Premium Items

    • When users click locked items, show upgrade modal
    • Include pricing comparison and benefits
    • Link to /pricing or Stripe checkout

  3. Coming Soon Modal/Toast

    • When users click disabled items, show "Coming Soon" notification
    • Optional: Allow email signup for feature notifications

  4. Library Item Counts

    • Show counts in Library dropdown (e.g., "NPCs (12)")
    • Requires prop drilling or context for content counts
    • May increase visual clutter (consider carefully)

  5. Recent Types Shortcut

    • Show last 2-3 used content types in header
    • Improves efficiency for power users
    • Requires local storage or user preferences table

  6. Mobile Bottom Nav Alternative

    • Consider hybrid approach (bottom nav for top 4 types, drawer for full menu)
    • Requires UX testing with real users first

Testing Checklist

Desktop

  • Create dropdown opens on click
  • Create dropdown closes on outside click
  • Create dropdown closes on Escape
  • Library dropdown opens on click
  • All links navigate correctly
  • Premium items show lock icon
  • Disabled items have reduced opacity
  • Keyboard navigation works (Tab, Arrow keys)

Mobile

  • Hamburger menu opens drawer
  • Swipe left closes drawer
  • Outside click closes drawer
  • CREATE NEW accordion expands/collapses
  • MY LIBRARY accordion expands/collapses
  • All links navigate correctly and close drawer
  • Premium items show lock icon
  • Dashboard link is prominent at top

i18n

  • All text uses translation keys
  • English translations complete
  • Other locales updated (de-DE, es-ES, fr-FR, pt-BR) - TODO

Accessibility

  • All interactive elements keyboard accessible
  • Focus indicators visible
  • ARIA labels present
  • Minimum 44px touch targets on mobile
  • Color contrast ≥4.5:1 (WCAG AA)

Performance Impact

Bundle Size

  • Added accordion component: ~2KB gzipped
  • No significant bundle size increase

Runtime Performance

  • Dropdowns render on demand (not pre-rendered)
  • Mobile accordions use CSS animations (GPU-accelerated)
  • No performance degradation observed

Migration Notes

Breaking Changes

None - All existing routes still work

Deprecation Warnings

  • Old "Create Character" button in header removed
  • Users should now use CREATE NEW accordion in mobile or navigate directly to /characters

Data Migration

None required

Success Metrics (To Track Post-Launch)

Quantitative

  1. Navigation Efficiency

    • Time to first content generation: Target under 30 seconds
    • Average clicks to reach generator: Target ≤2 clicks
    • Dropdown interaction rate: Target >60% of sessions

  2. Content Type Discovery

    • % of users trying ≥3 content types in first week: Target >40%
    • Premium content type clicks (locked items): Target >25% trial users

  3. Mobile Engagement

    • Mobile drawer open rate: Target >50% of mobile sessions
    • Accordion expand rate: Target >70% expand CREATE NEW

Qualitative

  1. Comprehension

    • "I can easily find all content types": Target >80% agree
    • "I understand Create vs Library": Target >90% agree

  2. Satisfaction

    • SUS (System Usability Scale) score: Target >75/100

Related Documentation

  • Design Proposal: /docs/design/style-guide.md
  • Vision Roadmap: /vision.md (Phases 1-7 content types)
  • Design System: /docs/architecture/design-system.md
  • i18n Guide: (TODO: Create i18n documentation)

Screenshots

Desktop - Create Dropdown

┌─────────────────────────────────────────────┐
│ CORE CONTENT                                │
│ ⚔️ NPC          Generate full stat block... │
│ 📜 Plot         Multi-scene narrative...    │
│ 🎲 Encounter    Balance combat...           │
│ 🗺️ Map          Scene with points...        │
│                                             │
│ REWARDS & CHALLENGES                        │
│ 💎 Treasure     Generate loot... (disabled) │
│ ⚙️ Traps        Design hazards... (disabled)│
│                                             │
│ LEGENDARY                        Premium    │
│ ✨ Deities 🔒   Divine stat blocks...       │
│ 🦸 Heroes 🔒    Legendary characters...     │
└─────────────────────────────────────────────┘

Mobile - Accordion Navigation

┌─────────────────────────┐
│ ⚔️ CritForge            │
├─────────────────────────┤
│ 📊 Dashboard            │
│ ─────────────────       │
│ ▼ CREATE NEW            │
│   ⚔️ NPC                │
│   📜 Plot               │
│   🎲 Encounter          │
│   🗺️ Map                │
│   💎 Treasure (50% op.) │
│   ✨ Deities 🔒         │
│                         │
│ ▼ MY LIBRARY            │
│   📚 All Content        │
│   ⚔️ NPCs               │
│   📜 Plots              │
│                         │
│ 🏰 Campaigns            │
│ 🛡️ Factions             │
│ ⚙️ Settings             │
└─────────────────────────┘

Implementation Complete: All core functionality working, translations in place, build verified. Next Steps: Track usage metrics, iterate based on user feedback, implement subscription state integration.