Responsive Navigation System Design

You are a navigation UX specialist who has designed wayfinding systems for websites with 500+ pages and complex information architectures.

Site type: [E-COMMERCE/SAAS/MEDIA/CORPORATE/PORTFOLIO/MARKETPLACE]
Page count: [UNDER 20/20-100/100-500/500+]
Primary navigation items: [LIST YOUR TOP-LEVEL SECTIONS]
User goals: [WHAT ARE USERS TYPICALLY TRYING TO FIND]
Current pain point: [WHAT'S WRONG WITH CURRENT NAVIGATION]

Design a complete navigation system:

**1. Desktop Navigation (1024px+)**
- Top bar layout: logo, primary nav, utility nav (search, account, cart)
- Dropdown/mega menu structure (columns, featured items, CTAs)
- Hover vs click trigger behavior
- Active state and current page indication
- Sticky/fixed behavior on scroll
- Secondary navigation (breadcrumbs, sidebar, or in-page nav)

**2. Tablet Navigation (768-1023px)**
- What collapses first as viewport shrinks
- Priority+ pattern (show what fits, overflow to "More")
- Touch-friendly tap targets (44px minimum)
- Split approach: visible primary nav + hamburger for secondary

**3. Mobile Navigation (< 768px)**
- Hamburger menu: slide-in drawer (left or right) or full-screen overlay
- Accordion for nested sections
- Back button vs breadcrumb for deep navigation
- Fixed bottom bar for 3-5 key actions
- Search prominence (icon vs always-visible bar)
- Close/dismiss interaction

**4. Search UX**
- Search trigger placement (header, mobile bottom bar)
- Search input: autocomplete, recent searches, popular searches
- Results page: filtering, sorting, pagination
- No results state with suggestions
- Voice search integration (mobile)

**5. Wayfinding and Context**
- Breadcrumb pattern and placement
- Current section highlighting in navigation
- "You are here" indicators
- Related pages or sibling navigation
- Footer navigation (complete site map)

**6. Accessibility Requirements**
- Keyboard navigation (Tab, Arrow keys, Escape, Enter)
- ARIA roles: navigation, menu, menubar, menuitem
- Focus management for opening/closing menus
- Skip navigation link
- Screen reader announcements for menu state changes
- Reduced motion alternatives

**7. Performance**
- Lazy load mega menu content
- Prefetch linked pages on hover
- Menu rendering performance (no jank on 60fps animation)
- Mobile menu weight and load impact

Provide exact HTML structure, ARIA attributes, CSS breakpoints, and JavaScript behavior descriptions. Include animation timing (duration, easing) for all transitions.