Header Search

A responsive search component that functions as a dropdown at wide widths and integrates with the mobile menu at narrow widths. Compatible with Drupal core search and Search API module.

Usage

{{ include('neonbyte:header-search', {
  attributes: attributes,
  content: search_form
}, with_context = false) }}

Slots

Slot Description
content Search form content from Drupal block

CSS Custom Properties

  • --header-search-background - Background color for dropdown (default: transparent)
  • --header-search-text-color - Text color on background
  • --header-search-padding-block - Vertical padding for search content
  • --header-search-font-size - Font size for search input (default: 22px)

Responsive Behavior

The component adapts to screen width at 1000px breakpoint:

  • Desktop (>1000px): Dropdown overlay with trigger button
  • Mobile (≤1000px): Integrated into mobile menu layout
  • Progressive enhancement: Functional with CSS-only fallback

JavaScript Features

  • Auto-focus: Search input receives focus when opened
  • Keyboard support: Escape key closes dropdown
  • Focus management: Proper focus handling on open/close
  • Integration: Coordinates with other header dropdowns

No JavaScript behavior

If JavaScript is not available (slow connection, something breaks, etc) we use @media (scripting: none) to make the search usable.

Accessibility Features

  • ARIA states: Uses aria-expanded for dropdown state
  • Semantic HTML: Uses <search> element for proper structure
  • Keyboard navigation: Full keyboard support with focus management
  • Screen reader support: Hidden text for trigger button
  • High contrast: Adapts button styling for forced colors mode