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.

<site-search> <button data-trigger> <icon-wc name="search"></icon-wc> Search </button> </site-search>

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

<site-search> <button data-trigger>Search</button> </site-search>

Icon-Only Button

<site-search> <button data-trigger aria-label="Search"> <icon-wc name="search"></icon-wc> </button> </site-search>

With Keyboard Hint

<site-search> <button data-trigger class="ghost"> <icon-wc name="search" size="sm"></icon-wc> Search <kbd>Cmd+K</kbd> </button> </site-search>

Attributes

Attribute Values Default Description
data-open boolean - Reflected attribute indicating open state

Events

Event Description
site-search:open Fired when search dialog opens
site-search:close Fired when 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

npm install --save-dev pagefind

2. Add Build Script

Add a script to run Pagefind after your site builds:

{ "scripts": { "build": "vite build && npm run search:index", "search:index": "pagefind --site dist" } }

3. Mark Content Areas

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

<main data-pagefind-body> <!-- Your content here --> </main>

4. Exclude Navigation

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

<aside data-pagefind-ignore> <!-- This won't be indexed --> </aside>

5. Configuration (Optional)

Create a pagefind.yml for advanced configuration:

site: dist output_subdir: pagefind exclude_selectors: - "header" - "footer" - "nav"

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