Describe your site structure and get a complete navigation UX system - from desktop mega menus to mobile hamburger patterns with accessibility built in.
Paste into any LLM. Use the output to design and implement navigation that works across all breakpoints and devices.
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.
"Responsive Navigation System Design" is built on a principle most AI users overlook: models perform dramatically better when given output formatting and context framing rather than open-ended questions. You can expect user-centered design specifications with component details, interaction states, and accessibility considerations - the kind of result that normally requires several rounds of prompt refinement.
These ui/ux design tips will help you get stronger results when using "Responsive Navigation System Design" and similar prompts in this category.
"Responsive Navigation System Design" is particularly useful in these situations. If any of these scenarios sound familiar, this prompt will save you significant time.
When you use "Responsive Navigation System Design" with ChatGPT, Claude, or Gemini, here is what to expect in the AI output.
Adapt "Responsive Navigation System Design" to your specific situation by modifying these key areas. The more context you add, the better the results.