### Navigation Patterns

- **Top Navigation**: Horizontal menu, common for websites
- **Side Navigation**: Vertical menu, ideal for dashboards
- **Hamburger Menu**: Hidden menu, mobile-first approach
- **Bottom Navigation**: Mobile apps, 3-5 primary destinations
- **Breadcrumbs**: Show location in hierarchy
- **Tabs**: Switch between related content views
- **Mega Menu**: Large dropdown with categories and links

### Form Patterns

- **Single-Column Layout**: One field per row, optimal for mobile
- **Multi-Step Forms**: Break complex forms into steps with progress indicator
- **Inline Validation**: Real-time feedback as users type
- **Field Labels**: Always visible, above or beside field
- **Optional vs Required**: Mark optional fields (not required)
- **Input Masks**: Format phone numbers, dates, credit cards
- **Autocomplete**: Suggest values, reduce typing errors

### Data Display Patterns

- **Tables**: Structured data with sorting and filtering
- **Cards**: Grouped information with visual hierarchy
- **Lists**: Sequential items with consistent formatting
- **Grids**: Visual browsing, product catalogs
- **Timelines**: Chronological events
- **Dashboards**: KPIs and metrics at a glance

### Feedback Patterns

- **Toast Notifications**: Brief, auto-dismissing messages
- **Modals**: Focused attention, confirmation dialogs
- **Inline Messages**: Contextual feedback near relevant elements
- **Progress Indicators**: Determinate or indeterminate loading
- **Empty States**: Helpful messaging when no content exists
- **Error States**: Clear error messages with recovery guidance

### Mobile Patterns

- **Pull-to-Refresh**: Swipe down to update content
- **Swipe Actions**: Reveal actions on list items
- **Infinite Scroll**: Load more content as user scrolls
- **Bottom Sheets**: Contextual options from bottom of screen
- **FAB (Floating Action Button)**: Primary action, always visible
- **Gestures**: Tap, swipe, pinch, long-press, drag

---