Algolia SiteSearch

Inline autocomplete dropdown search experience powered by Algolia's InstantSearch.

The Dropdown Search experience provides an inline autocomplete dropdown that appears below the search input, perfect for navigation bars, headers, or any context where a modal would be too intrusive.

Use cases

Navigation bar search
Header search component
Inline search without modal interruption
Autocomplete-style search experiences

Preview

Open in

Usage

npx shadcn@latest add @algolia/dropdown-search

This will add the Dropdown Search experience to your project under components/dropdown-search. Use it like this:

import DropdownSearch from "@/components/dropdown-search";

<DropdownSearch
  applicationId="06YAZFOHSQ"
  apiKey="94b6afdc316917b6e6cdf2763fa561df"
  indexName="algolia_podcast_sample_dataset"
  placeholder="Search podcasts..."
  hitsPerPage={5}
  attributes={{
    primaryText: "title",
    secondaryText: "description",
    tertiaryText: "itunesAuthor",
    url: "url",
    image: "imageUrl",
  }}
/>

Structure

dropdown-search.tsx

use-keyboard-navigation.tsx

package.json

Behavior

Opens automatically: Dropdown appears when there's a query (query length > 0)
Closes on outside click: Radix Popover automatically handles closing when clicking outside
Closes on selection: Selecting a result closes the dropdown and clears the query
Keyboard navigation: Arrow keys to navigate, Enter to select
No modal: Stays inline with your layout

References

Prop

Type

Extending further

Change the styling to match your brand
Customize the dropdown appearance via Radix Popover props
Add custom behavior on item selection
Open in v0 for more customization

Dropdown Search