<pagefind-filter-dropdown>

A dropdown selector for a single filter.

<pagefind-filter-dropdown filter="section" label="Section"></pagefind-filter-dropdown>

Attributes

Attribute Type Default Description
filter string — Required. The filter key to display
label string filter name Text shown on the trigger button
single-select boolean false Allow only one selection (closes after selecting)
show-empty boolean false Show options with zero results
wrap boolean false Allow text to wrap to multiple lines
sort string "default" Sort filter values: default, alphabetical, count-desc, count-asc
hide-clear boolean false Hide the adjacent “Clear” button
instance string "default" Connect to a specific Pagefind instance

Keyboard Navigation

Full keyboard support following the ARIA Listbox pattern:

Key Action
↓ / ↑ Navigate through options
Home / End Jump to first/last option
Enter / Space Toggle selection
Escape Close dropdown
Tab Close and move focus
Type characters Jump to matching option (type-ahead)

Type-Ahead Behavior

When you type characters while the dropdown is open:

  • The component jumps to the first option that starts with the typed characters
  • Matching is case-insensitive
  • The type buffer clears after 500ms of inactivity

Faceted Search Mode

For catalog-style interfaces where users browse by filters without requiring a search term, enable faceted mode via <pagefind-config>:

<pagefind-config faceted preload></pagefind-config>

In faceted mode, all results are shown initially and update immediately when filters are changed. See the config component documentation for details.