Skip to main content
Our docs redesign is live!

HeaderSearch

Client-side header search with typeahead suggestions, debouncing, and result previews.

Props

PropTypeRequiredDefaultDescription
trailingReactNodeNo—Optional control beside the input (e.g. Ask Dex). The results panel centers on the full group.

Usage

import HeaderSearch from '@/components/molecules/HeaderSearch';
import { ConciergeTrigger } from '@/components/molecules/concierge/ConciergeTrigger';

<HeaderSearch trailing={<ConciergeTrigger className="shrink-0" />} />

Features

  • Typeahead search: Fetches suggestions from /api/search/typeahead as the user types
  • Debounced requests: 250ms debounce to avoid excessive API calls
  • Minimum query length: Requires at least 2 characters before searching
  • Abort controller: Cancels in-flight requests when query changes
  • Result cards: Displays results using SearchResultCard component
  • Loading state: Shows "Searching..." during API calls
  • Empty state: Shows "No matches yet." when no results found
  • Full search link: "View all results" link at bottom navigates to /search?q=...
  • Form submission: Pressing Enter navigates to the full search page
  • / shortcut: Pressing / (when focus is not in another field) focuses the header search input; empty state shows a / kbd hint

The dropdown appears when:

  • Query is at least 2 characters
  • Either loading or results are available

The dropdown closes when:

  • Query is cleared
  • A result is clicked
  • "View all results" is clicked

Panel layout:

  • Anchored to the Search + trailing control group
  • Centered with left-1/2 -translate-x-1/2
  • Responsive width: min(90vw, 46rem)

Notes

  • Client component ('use client')
  • Uses the SearchBar molecule for the input
  • Uses the SearchResultCard component for result items
  • Positioned with z-30 / dropdown z-40
  • Used inside DesktopNavigation and MobileNavigation