Dropdown Menu Component

Design a dropdown menu component that opens on click/hover and allows keyboard navigation.

R - Requirements

Key Questions:

• Trigger? (click, hover, both)
• Single or multi-level? (nested menus)
• Close on selection? (yes/no)
• Close on outside click? (yes)
• Positioning? (below, above, auto-detect)

Common Answers:

• Click to open/close
• Single level initially
• Close on selection and outside click
• Auto-position based on viewport

A - Architecture

Dropdown Lifecycle:

Component Architecture:

Architecture Decisions:

• Portal rendering (render outside DOM hierarchy) - Prevents overflow issues
• Position calculation (viewport-aware positioning) - Auto-flip if no space
• Focus trap (keep focus within menu when open) - Accessibility requirement

Relevant Content:

• Focus Management SPA - Focus trap patterns

D - Data Model

State Management:

• Open/closed state
• Selected item
• Focused item (for keyboard nav)
• Menu items structure

Persistence:

• None (ephemeral state)

I - Interface

Features:

• Trigger button/area
• Menu container (portal)
• Menu items (clickable)
• Keyboard navigation (arrow keys, Enter, Escape)
• Focus management

Accessibility:

• ARIA menu pattern
• role="menu", role="menuitem"
• aria-expanded on trigger
• Keyboard navigation (arrows, Enter, Escape, Tab)
• Focus trap when open

Relevant Content:

• Keyboard Shortcuts - Navigation
• Accessible Animations - Menu animations

O - Optimizations

Performance:

• Lazy render (only render when open)
• Animation performance (transform/opacity)
• Position calculation (debounce resize/scroll)

UX:

• Smooth animations (fade, slide)
• Viewport-aware positioning (flip if no space)

Relevant Content:

• Animation Performance - 60fps animations
• Composite Layers - GPU acceleration

Implementation Checklist

• Portal rendering
• Click/hover trigger
• Keyboard navigation (arrows, Enter, Escape)
• Focus trap
• Focus restoration (return to trigger)
• Viewport-aware positioning
• Close on outside click
• Close on selection
• ARIA attributes (role, aria-expanded)
• Animations (fade, slide)

Common Pitfalls

❌ No keyboard navigation → Poor accessibility
✅ Arrow keys to navigate, Enter to select, Escape to close

❌ No focus trap → Users tab outside menu
✅ Trap focus within menu when open

❌ Fixed positioning → Menu cut off at viewport edge
✅ Auto-position based on available space