Search — Vanilla

Search with vanilla HTML or use the same Astro component. Live example and copyable code.

Search

Search overlay with trigger, Cmd+K/Ctrl+K, and results panel. Same behavior as Astro and Svelte. Use the live example below or copy the HTML/JS.

Add this component

The command below includes <strong>Search</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Live example

Search is in the navbar (top of page) — click the search icon or press Ctrl+K / Cmd+K. You can also use the standalone search below.

Standalone search (same as navbar)

HTML (structure)

Copy the markup below. Ensure Rizzo CSS is loaded and js/main.js is included (from the minimal scaffold). It wires the trigger, overlay click-to-close, Escape, and focus trap inside the panel.

html html 
<!-- Scaffold/minimal Search: trigger + overlay + input + sample results. Include js/main.js for open/close, focus trap, click-outside. -->
<div class="search" data-search>
  <div class="search__trigger-wrapper">
    <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-panel">
      <span class="search__trigger-text">Search</span>
    </button>
  </div>
  <div class="search__overlay" id="search-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
    <div class="search__panel">
      <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
      <div class="search__results" role="listbox" aria-label="Search results">
        <div class="search__empty">
          <p class="search__empty-text">Start typing to search…</p>
        </div>
        <div class="search__results-list" role="group" aria-label="Sample results">
          <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
          <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
          <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript (open/close + Cmd+K)

javascript javascript 
// Scaffold uses js/main.js: open/close on trigger, click overlay to close, Escape, focus trap in panel.

Astro Search docs — Algolia setup, props, and full script you can port to vanilla.

Other frameworks: Astro · Svelte · Vue · React