site-search

Site search component powered by Pagefind for fast, client-side full-text search.

Overview

The <site-search> component provides a modal search interface with keyboard shortcuts, result highlighting, and keyboard navigation. It uses Pagefind for indexing and searching your static site content.

Keyboard Shortcuts

The search component supports the following keyboard shortcuts:

Shortcut	Action
`Cmd` + `K` / `Ctrl` + `K`	Open/close search
`Escape`	Close search
`Arrow Up` / `Arrow Down`	Navigate results
`Enter`	Go to selected result

Trigger Variants

Text Button

Icon-Only Button

With Keyboard Hint

Attributes

Attribute	Values	Default	Description
`open` (reflected)	boolean	—	Reflected state — set by open()/close() methods, not intended as initial markup

Required Structure

Element	Required	Description
`<button data-trigger>`	yes	Button that opens the search dialog

Child Attributes

Attribute	On	Values	Description
`data-trigger`	`button`	boolean	Marks the button that opens the search dialog. Falls back to first <button> if absent.

Events

Event	Detail	Description
`site-search:open`	—	Fired when the search dialog opens
`site-search:close`	—	Fired when the search dialog closes

Pagefind Setup

The search component requires Pagefind to index your site content. Follow these steps to set up Pagefind:

1. Install Pagefind

2. Add Build Script

Add a script to run Pagefind after your site builds:

3. Mark Content Areas

Add data-pagefind-body to your main content areas to index them:

4. Exclude Navigation

Navigation and chrome are automatically excluded. You can also explicitly exclude elements:

5. Configuration (Optional)

Create a pagefind.yml for advanced configuration:

Accessibility

Uses role="dialog" for the search modal
Focus is trapped within the dialog when open
Escape key closes the dialog and returns focus to trigger
Results use role="listbox" and role="option"
Keyboard navigation through results with arrow keys