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

AttributeValuesDefaultDescription
open (reflected)boolean—Reflected state — set by open()/close() methods, not intended as initial markup

Required Structure

ElementRequiredDescription
<button data-trigger>yesButton that opens the search dialog

Child Attributes

AttributeOnValuesDescription
data-triggerbuttonbooleanMarks the button that opens the search dialog. Falls back to first <button> if absent.

Events

EventDetailDescription
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
↑