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.

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. Wire data-search-trigger, data-search-close, data-search-overlay, and data-search-input with your own search logic (or use the JS snippet).

html html 
<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-results" data-search-trigger>
      <span class="search__icon" aria-hidden="true"><!-- Search SVG --></span>
      <span class="search__trigger-text">Search</span>
      <kbd class="search__kbd" aria-hidden="true">
        <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
        <kbd>K</kbd>
      </kbd>
    </button>
  </div>
  <div class="search__overlay" data-search-overlay aria-hidden="true">
    <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-title" id="search-results" tabindex="-1">
      <h2 id="search-title" class="sr-only">Search documentation</h2>
      <div class="search__header">
        <div class="search__input-wrapper">
          <input type="search" class="search__input" id="search-input" placeholder="Search..." aria-label="Search" data-search-input />
          <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>×</button>
        </div>
      </div>
      <div class="search__results" id="search-results-list" role="listbox" aria-label="Search results">
        <!-- Results; wire with Algolia or client-side index via JS -->
      </div>
    </div>
  </div>
</div>

JavaScript (open/close + Cmd+K)

javascript javascript 
// Minimal: open/close on trigger and overlay, Cmd+K
(function() {
  var search = document.querySelector('[data-search]');
  var trigger = document.querySelector('[data-search-trigger]');
  var overlay = document.querySelector('[data-search-overlay]');
  var closeBtn = document.querySelector('[data-search-close]');
  if (!search || !trigger || !overlay) return;
  function open() { overlay.setAttribute('aria-hidden', 'false'); trigger.setAttribute('aria-expanded', 'true'); }
  function close() { overlay.setAttribute('aria-hidden', 'true'); trigger.setAttribute('aria-expanded', 'false'); }
  trigger.addEventListener('click', open);
  overlay.addEventListener('click', function(e) { if (e.target === overlay) close(); });
  if (closeBtn) closeBtn.addEventListener('click', close);
  document.addEventListener('keydown', function(e) {
    if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); overlay.getAttribute('aria-hidden') === 'true' ? open() : close(); }
    if (e.key === 'Escape') close();
  });
})();

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

Astro / Svelte: Astro · Svelte