Search Command Palette

Location

Rendered in wp_footer via the child theme functions.php. Triggered by the header search icon on non-front pages.

Trigger

The header search icon is a menu bar item added by:

add_action('generate_menu_bar_items', 'id86_fusejs_header_search_trigger');

It renders:

<span class="menu-bar-item">
  <a href="#id86-fuse-palette" role="button" aria-label="Search documentation"
     aria-haspopup="dialog" aria-controls="id86-fuse-palette" data-id86-fuse-open>
    <!-- SVG search icon -->
  </a>
</span>

The trigger is omitted on the front page (is_front_page()).

Overlay

The palette is a fixed-position overlay:

<div class="id86-fuse-palette" id="id86-fuse-palette" aria-hidden="true">
  <div class="id86-fuse-palette-overlay" data-id86-fuse-close></div>
  <div class="id86-fuse-palette-panel" role="dialog" aria-modal="true"
       aria-label="Search documentation">
    <div class="fusejs-search-container">
      <span class="fusejs-search-icon">&gt;</span>
      <input type="text" id="id86-fuse-palette-input" class="fusejs-input"
             placeholder="Search Git, Docker, grammar, or SEO..."
             autocomplete="off">
      <kbd class="fusejs-kbd">Esc</kbd>
    </div>
    <div class="fusejs-results" id="id86-fuse-palette-results" style="display:none;"></div>
  </div>
</div>

Behavior

• Opening: Adds is-open class, sets aria-hidden="false", focuses the input.
• Closing: Click overlay, press Escape, or click close trigger. Removes is-open class, clears input.
• Body scroll is prevented via body.id86-fuse-palette-open { overflow: hidden; }.
• Results render identically to the hero search (same renderer in id86-fusejs-global.js).

CSS

Class	Role
.id86-fuse-palette	Fixed full-screen overlay container, hidden by default
.id86-fuse-palette.is-open	Shows the palette
.id86-fuse-palette-overlay	Semi-transparent dark backdrop
.id86-fuse-palette-panel	Centered dialog, max 760px width
.id86-fuse-palette-panel .fusejs-results	Results list with max-height limit
.id86-fuse-palette-panel .fusejs-cat	Category chip styling

Comparison

The palette shares the same search renderer logic as the hero input. Both use the same setupSearch() function from id86-fusejs-global.js. The only differences are:

• Different DOM containers.
• Palette has an Escape → close behavior; hero hides results on Escape.
• Palette restores focus management; hero does not.