UI & interface design

Navigation Pattern Design Generator

A comprehensive prompt template for designing intuitive, scalable navigation systems that guide users seamlessly through digital products. Perfect for UI/UX designers, information architects, and product teams building websites, mobile apps, or enterprise applications with complex content structures.

6 blanks to fill in · Added December 2025 · navigation-design · information-architecture · menu-design · ux-patterns · interface-navigation

The prompt

6 blanks

You are an expert UI/UX designer specializing in navigation pattern design and information architecture, with deep expertise in creating intuitive navigation systems that improve findability, reduce cognitive load, and enhance user satisfaction.

Design a comprehensive navigation system for [PROJECT/APPLICATION NAME] targeting [PLATFORM: web, mobile app, desktop application, responsive cross-platform]. The navigation should serve [PRIMARY USER PERSONA] and support [KEY USER GOALS/TASKS].

## Project Context:

**Product Overview:**
- Application type: [e.g., e-commerce site, SaaS dashboard, content platform, enterprise tool, portfolio]
- Content scope: [NUMBER] primary sections with [DEPTH: shallow/moderate/deep] hierarchy
- Information architecture: [flat structure, hierarchical, hub-and-spoke, nested categories]
- User expertise level: [novice, intermediate, expert, mixed]
- Primary use cases: [browsing, task completion, content discovery, data management]

**Platform Specifications:**
- Target devices: [desktop 1920px+, tablet 768-1024px, mobile 375-428px]
- Responsive requirements: [mobile-first, desktop-first, adaptive]
- Technical constraints: [single-page app, multi-page, progressive web app]
- Performance goals: [page load speed, interaction responsiveness]

**User Context:**
- Usage frequency: [daily power users, occasional visitors, one-time users]
- Navigation depth: [shallow browsing, deep exploration, specific task completion]
- Entry points: [homepage, search, direct links, external referrals]
- Key user pain points: [getting lost, too many clicks, unclear labels, hidden features]

## Navigation Pattern Selection:

Choose and design appropriate navigation patterns from:

### Primary Navigation Patterns:

**1. Horizontal Top Navigation Bar**
- Best for: [5-7 primary sections, desktop-focused, wide recognition]
- Structure: Linear menu in header with [left/center/right alignment]
- Behavior: [Fixed/sticky on scroll, transparent to solid, collapse on mobile]
- Dropdown capability: [Mega menu, simple dropdown, hover/click activation]

**2. Vertical Sidebar Navigation**
- Best for: [8+ sections, deep hierarchies, admin dashboards, apps with frequent navigation]
- Structure: Left or right sidebar with [collapsible/expandable sections]
- Behavior: [Always visible, collapsible to icons, overlay on mobile]
- Hierarchy display: [Nested accordions, expandable groups, multi-level indentation]

**3. Hamburger Menu (Mobile-First)**
- Best for: [Mobile apps, responsive sites, minimalist designs]
- Structure: Hidden menu revealed via hamburger icon
- Behavior: [Slide-in overlay, push content, full-screen takeover]
- Animation: [Slide from left/right, fade in, curtain reveal]

**4. Bottom Tab Bar (Mobile)**
- Best for: [3-5 primary sections, mobile apps, frequent task switching]
- Structure: Fixed bottom navigation with icons and labels
- Behavior: [Always visible, highlight active section, optional badge counts]
- Icon design: [Outlined default, filled active, with/without labels]

**5. Tab Navigation**
- Best for: [Related content sections, settings pages, profile views]
- Structure: Horizontal tabs switching content views
- Behavior: [Underline indicator, background highlight, scrollable on mobile]
- Position: [Below header, within content area, sticky on scroll]

**6. Mega Menu**
- Best for: [E-commerce, content-heavy sites, complex catalogs]
- Structure: Expandable panel showing multiple columns and categories
- Behavior: [Hover or click activation, includes images/descriptions]
- Organization: [Grouped by category, featured items, visual hierarchy]

**7. Breadcrumb Navigation**
- Best for: [Deep hierarchies, e-commerce, documentation, multi-step processes]
- Structure: Horizontal trail showing location path
- Behavior: [Clickable path elements, collapse on mobile, show parent levels]
- Position: [Below header, above content, within page title area]

**8. Hub and Spoke (Dashboard)**
- Best for: [Admin panels, analytics dashboards, control centers]
- Structure: Central hub with links to specialized sections
- Behavior: [Card-based navigation, icon grid, categorized sections]
- Return pattern: [Always return to hub, persistent navigation sidebar]

**9. Contextual/Progressive Navigation**
- Best for: [Onboarding flows, multi-step forms, guided experiences]
- Structure: Show only relevant next steps based on context
- Behavior: [Adaptive menu items, predictive suggestions, personalized shortcuts]
- AI integration: [User behavior patterns, location-aware, time-based]

### Secondary Navigation Elements:

- **Search**: Global search with [autocomplete, filters, recent searches]
- **User Menu**: Account access with [profile, settings, logout]
- **Utility Navigation**: [Contact, help, language selector, shopping cart]
- **Pagination**: [Numbered pages, infinite scroll, load more button]
- **Filters & Sorting**: [Sidebar filters, top bar dropdowns, floating filter button]
- **Quick Actions/FAB**: Floating action button for primary task

## Navigation Design Specifications:

### Visual Design:

**Typography:**
- Navigation labels: [Font family, size 14-16px for readability, weight 400-600]
- Active state: [Bold, color change, size increase]
- Label style: [Sentence case, Title Case, UPPERCASE]
- Character limit: [20-30 characters maximum per label]

**Color & Contrast:**
- Default state: [Color with 4.5:1 contrast minimum]
- Active/selected state: [Highlight color, background change, underline]
- Hover state: [Subtle color shift, background overlay, underline preview]
- Background: [Solid, transparent, gradient, glass morphism]

**Spacing & Layout:**
- Menu item padding: [Vertical 12-16px, horizontal 16-24px for touch targets]
- Item spacing: [8-12px between items, consistent throughout]
- Container width: [Full width, max-width constraint, centered]
- Mobile touch targets: [Minimum 44x44px for tappable areas]

**Icons & Indicators:**
- Icon style: [Outlined, filled, custom brand icons]
- Icon size: [20-24px paired with text, 28-32px icon-only]
- Active indicators: [Underline bar, dot indicator, background pill, left border]
- Dropdown indicators: [Chevron down, caret, arrow with rotation on expand]

### Behavior & Interactions:

**Desktop Behavior:**
- Hover effects: [Background change, underline animation, color transition]
- Dropdown activation: [Hover with delay, click to open/close]
- Mega menu display: [Fade in 200ms, slide down, expand with animation]
- Active state persistence: [Highlight current section, breadcrumb trail]

**Mobile Behavior:**
- Menu activation: [Tap hamburger icon, swipe from edge]
- Menu appearance: [Slide-in overlay, push content, full-screen]
- Close method: [X button, tap outside, swipe away, back button]
- Scroll behavior: [Fixed header, collapse on scroll down, show on scroll up]

**Scroll Interactions:**
- Fixed/sticky navigation: [Always visible, collapse to compact version]
- Hide on scroll down: [Reveal on scroll up for maximum content space]
- Transparent to solid: [Background opacity increases with scroll]
- Shrink header: [Reduce height/logo size after scroll threshold]

**Keyboard Navigation:**
- Tab order: [Logical left-to-right, top-to-bottom flow]
- Focus indicators: [Visible outline, background highlight]
- Keyboard shortcuts: [Arrow keys for menu navigation, Enter to select]
- Skip links: [Skip to main content for accessibility]

### Information Architecture:

**Content Organization:**
- Grouping strategy: [By task, by topic, by user role, by frequency]
- Primary sections: [List 5-7 main categories with clear boundaries]
- Sub-navigation: [2-3 levels maximum, progressive disclosure]
- Label taxonomy: [User-centric language, not company jargon]

**Navigation Hierarchy:**
- Level 1: [5-7 primary sections in main navigation]
- Level 2: [Dropdown or sidebar subsections, 5-10 items]
- Level 3: [In-page navigation, tabs, left sidebar for deep content]
- Visual distinction: [Indent, font size, color to show hierarchy]

**Priority & Positioning:**
- Left/top priority: [Most important, frequently accessed items]
- Right utility: [Account, cart, search, settings]
- Calls-to-action: [Button treatment for primary actions]
- Hidden/overflow: [Less important items in 'More' menu]

## Responsive Strategy:

**Desktop (1024px+):**
- Pattern: [Horizontal top navigation with mega menu or dropdowns]
- Layout: [Full menu visible, all categories shown]
- Hover interactions: [Active for discovery and quick access]

**Tablet (768-1023px):**
- Pattern: [Condensed horizontal navigation or hybrid approach]
- Layout: [Shorter labels, icon+text combinations, possible hamburger]
- Touch optimization: [Larger touch targets, tap instead of hover]

**Mobile (375-767px):**
- Pattern: [Hamburger menu, bottom tab bar, or hybrid]
- Layout: [Vertical stacked menu, full-screen overlay]
- Gestures: [Swipe to open/close, tap to expand categories]
- Priority: [Show only essential 3-5 items in bottom tab bar]

**Breakpoint Transitions:**
- 1024px: Desktop to tablet (collapse mega menu)
- 768px: Tablet to mobile (switch to hamburger or bottom tabs)
- Smooth transitions: [Avoid jarring layout shifts]

## Accessibility Requirements:

- **ARIA labels**: Proper landmarks (navigation, main, search)
- **Keyboard navigation**: Full keyboard access with visible focus
- **Screen reader support**: Descriptive labels, expanded/collapsed states
- **Skip navigation**: Skip to main content link for keyboard users
- **Focus management**: Trap focus in open modals/menus
- **Color contrast**: 4.5:1 minimum for text, 3:1 for interactive elements
- **Touch targets**: 44x44px minimum on mobile
- **Motion sensitivity**: Respect prefers-reduced-motion for animations

## Advanced Features:

**Search Integration:**
- Global search bar: [Expandable, always visible, overlay search]
- Search position: [Header, centered, right-aligned]
- Autocomplete: [Suggestions as user types, recent searches]
- Search results: [Inline preview, dedicated results page]

**Personalization:**
- Adaptive navigation: [Show frequently accessed sections first]
- User role menus: [Admin vs. user vs. guest navigation]
- Recent/favorites: [Quick access to user's common destinations]
- AI-powered suggestions: [Context-aware navigation recommendations]

**Progress & Orientation:**
- Breadcrumbs: [Show location in hierarchy, clickable path]
- Page title synchronization: [Match navigation label to page heading]
- Progress indicators: [Multi-step processes, percentage complete]
- Location highlighting: [Bold, underline, or color current section]

## Deliverables:

1. **Navigation System Design:**
   - Desktop navigation mockups with all states (default, hover, active)
   - Mobile navigation design with open/closed states
   - Tablet navigation showing responsive adaptation
   - Mega menu or dropdown designs (if applicable)
   - All navigation patterns organized in [Figma/Sketch/Adobe XD]

2. **Interactive Prototype:**
   - Clickable navigation demonstrating all interactions
   - Dropdown/mega menu behaviors
   - Mobile menu animations
   - Responsive breakpoint transitions
   - Search functionality and results

3. **Information Architecture Document:**
   - Complete sitemap showing all pages and hierarchy
   - Navigation taxonomy with labels and descriptions
   - User flow diagrams for key tasks
   - Content grouping rationale

4. **Technical Specifications:**
   - Navigation component structure and states
   - CSS/styling specifications for each element
   - Responsive breakpoints and behaviors
   - Animation timing and easing functions
   - Accessibility implementation guidelines

5. **Usage Guidelines:**
   - When to use each navigation pattern
   - Label writing best practices
   - Adding new navigation items guidelines
   - Do's and don'ts with visual examples
   - Mobile-first considerations

6. **Component Library:**
   - Reusable navigation components for [React/Vue/Angular/Web Components]
   - Variants for different contexts and states
   - Code snippets with implementation examples
   - Accessibility attributes and keyboard handlers

Ensure the navigation system achieves:
- **Clarity**: Users know where they are and where they can go
- **Consistency**: Navigation behaves predictably across all pages
- **Efficiency**: Key destinations reachable in 2-3 clicks maximum
- **Findability**: Users can locate content through navigation or search
- **Accessibility**: WCAG 2.2 AA compliance with keyboard and screen reader support
- **Responsiveness**: Seamless experience across all devices and screen sizes
- **Scalability**: System accommodates future content growth without redesign

Open in ChatGPT

Blanks: Project/application name · Platform · Primary user persona · Key user goals/tasks · Number · Depth

How to use it

Use this prompt to design a complete navigation system tailored to your product's information architecture and user needs. Replace bracketed placeholders with specific details about your project including platform, content structure, user types, and complexity level. The output will provide comprehensive navigation designs covering primary and secondary patterns, responsive behavior, accessibility features, and implementation guidelines. For optimal results, conduct card sorting or tree testing with users beforehand to validate your information architecture, and provide examples of navigation styles that align with your brand aesthetic.

Tips

Apply the three-click rule guideline: users should reach any destination within three clicks from the homepage. While not absolute, it's a useful heuristic for evaluating navigation efficiency and hierarchy depth.
Use consistent navigation placement across your entire site or application. Users develop muscle memory for navigation location—switching from top to side navigation between sections creates confusion and increases cognitive load.
Design your navigation labels from user research and actual user language, not internal company terminology. If users call something 'pricing' but you label it 'plans,' they'll struggle to find it even if the content is identical.
Implement visual hierarchy within navigation using size, color, weight, and spacing to distinguish between primary, secondary, and tertiary navigation levels. Users should instantly understand navigation importance and relationships through visual design alone.
Test navigation with realistic content and labels rather than 'Nav Item 1, Nav Item 2' placeholders. Real content reveals length issues, hierarchy problems, and clarity concerns that generic placeholders hide during design phases.
Provide multiple navigation paths to key destinations—combine top navigation, search, contextual links, and breadcrumbs so users with different preferences or mental models can find content through their preferred method.

Choosing the Right Pattern

Navigation pattern selection depends on multiple factors including content volume, hierarchy depth, platform, and user behavior. Horizontal top navigation works best for websites with 5-7 primary sections and relatively flat hierarchies, offering familiarity and desktop-optimized browsing. Vertical sidebar navigation suits applications with 8+ sections or deep hierarchies where users need persistent access to navigation, particularly common in admin dashboards and productivity tools. Bottom tab bars excel for mobile apps requiring frequent switching between 3-5 core functions, keeping primary actions thumb-accessible. Hamburger menus conserve screen space but hide navigation, working best when combined with clear labels and search functionality. Mega menus suit e-commerce and content-heavy sites with complex catalogs, allowing users to see multiple options simultaneously without deep clicking. Consider hybrid approaches combining multiple patterns: a horizontal top navigation for primary categories with a persistent sidebar for sub-sections, or a bottom tab bar for core functions with a hamburger menu for additional options. Analyze user analytics to identify high-traffic paths and ensure your chosen pattern makes those destinations easily accessible.

Information Architecture Fundamentals

Effective navigation design begins with solid information architecture that reflects user mental models rather than organizational structure. Conduct card sorting exercises where users group and label content naturally, revealing intuitive categorization patterns. Organize navigation around user goals and tasks rather than company departments or internal terminology—users want to 'Track Order' not 'Customer Service Portal.' Apply the 7±2 rule: human working memory typically handles 5-9 items effectively, so limit top-level navigation to this range. For deeper hierarchies, implement progressive disclosure showing only relevant sub-navigation based on context, preventing overwhelming menus. Use descriptive, action-oriented labels that clearly communicate destination or outcome: 'Create New Project' beats 'Projects' for task-focused navigation. Maintain consistent labeling conventions throughout—if you use verbs in one section (Browse Products), use verbs consistently (View Orders, Track Shipping) rather than mixing with nouns. Test your information architecture through tree testing, where users navigate text-only hierarchies to find specific content, validating findability before visual design begins. Monitor analytics to identify high-exit pages, bounce rates, and search queries that indicate navigation failures requiring restructuring.

Mobile-First Navigation Strategy

Mobile navigation presents unique challenges with limited screen space and touch-based interactions requiring thoughtful pattern selection. The bottom tab bar pattern keeps primary navigation thumb-accessible on larger devices, ideal for apps requiring frequent section switching like social media, messaging, or content platforms. Limit bottom tabs to 3-5 items with clear icons and concise labels, using badges for notifications or counts. Hamburger menus conserve space but research shows they reduce discoverability and engagement—if using hamburger navigation, combine with clear menu labels, preview key items outside the menu, or implement hybrid approaches. Priority+ navigation shows as many items as screen width permits with overflow items in a 'More' menu, adapting gracefully across breakpoints. Consider gesture-based navigation like swipe-to-open menus or edge swipes for back navigation, but provide visible buttons as alternatives since gesture discoverability remains low. Implement sticky headers carefully—they provide persistent access but consume vertical space which is precious on mobile. Test thoroughly with one-handed usage scenarios, ensuring interactive elements fall within comfortable thumb zones (bottom 60% of screen for most users). Never rely on hover-based interactions on mobile; use tap to open dropdowns with clear expand/collapse indicators.

Navigation Performance and Testing

Navigation significantly impacts perceived performance and user success rates, requiring continuous testing and optimization. Implement lazy loading for mega menus and complex dropdowns, rendering content only when users interact to improve initial page load. Prefetch high-probability destinations on hover (with debouncing) to make subsequent navigation feel instant. Monitor navigation metrics including task success rates (can users find specific content), time to complete tasks, number of clicks to destination, and search usage rates which often indicate navigation failures. Conduct A/B testing on navigation patterns—try horizontal vs. vertical layouts, different label wording, or varying information architectures while measuring conversion rates, engagement, and bounce rates. Use session recordings to observe real user navigation behavior, identifying confusion points, dead ends, or unexpected paths. Perform usability testing with realistic tasks like 'Find your order history' or 'Update payment method,' observing where users hesitate, click wrong items, or express frustration. Test with diverse user groups including novices and experts, as optimal patterns may differ based on familiarity. Ensure navigation renders correctly across browsers and devices, particularly testing iOS Safari, Chrome mobile, and various screen sizes. Validate accessibility through keyboard-only navigation, screen reader testing with NVDA or JAWS, and color contrast verification for all states.