Search icon

Mount a compact search icon or labeled button into your navigation bar or toolbar that opens the AI search overlay when a user clicks it.

The search icon placement renders a small, self-contained search button inside a target element. Unlike the search embed, it does not display a visible text input. Instead, it shows an icon, a label, or both. When a user clicks it, the search overlay opens. This placement works well in navigation bars, toolbars, and any space-constrained area where a full input bar would not fit.

Mounting the placement

Pass Placement.SearchIcon as the first argument to mount(), followed by the target element and an options object.

window.InlineAI.mount(
  window.InlineAI.Placement.SearchIcon,
  'nav-search',
  {
    label: 'Search',
    shouldShowIcon: true,
    buttonWidth: '120px',
    buttonHeight: '40px',
  }
);

The target can be a string element ID, a CSS selector, or a dynamic matcher object. The call returns a placement ID you can pass to unmount().

The search icon placement requires a target element. If you want a floating button that is not anchored to any container, use the Search FAB placement instead.

Targeting the container

// By element ID
window.InlineAI.mount(window.InlineAI.Placement.SearchIcon, 'nav-search');
 
// By CSS selector
window.InlineAI.mount(window.InlineAI.Placement.SearchIcon, {
  selector: '.site-header .search-trigger',
});

Options

Button appearance

labelQuerystring

Text label displayed on the button. If omitted, the button shows only the icon (if shouldShowIcon is true).

shouldShowIconQueryboolean

Whether to display the search icon on the button. Defaults to showing the icon.

buttonWidthQuerystring

Width of the button as a CSS value (e.g. "120px", "100%").

buttonHeightQuerystring

Height of the button as a CSS value (e.g. "40px").

maxWidthQuerystring

Maximum width of the button as a CSS value.

maxHeightQuerystring

Maximum height of the button as a CSS value.

Search overlay

placeholderQuerystring

Placeholder text shown in the search input when the overlay opens.

overlayTypeQueryOverlayType

How the search overlay appears. window.InlineAI.OverlayType.Modal centers it over the page; window.InlineAI.OverlayType.Drawer slides it in from the side.

backdropOpacityQuerynumber

Opacity of the backdrop behind the overlay, between 0 and 1.

openOverlayOnQueryOpenOverlayOn

When to open the search overlay. window.InlineAI.OpenOverlayOn.Focus opens it on focus; window.InlineAI.OpenOverlayOn.QuerySubmit opens it after query submission.

shouldShowSuggestedQuestionsQueryboolean

Whether to display suggested questions in the search overlay.

suggestedQuestionsModeQuerySuggestedQuestionsMode

How to display suggested questions: "animated" cycles through them, "static" shows them all.

typographySourceQueryTypographySource

Typography inheritance mode: "inherit-from-website" or "inherit-from-theme".

overlayBreakpointsQueryOverlayBreakpointConfig[]

Per-viewport overrides for overlayType, backdropOpacity, and openOverlayOn.

Full example

window.InlineAI.mount(
  window.InlineAI.Placement.SearchIcon,
  'nav-search',
  {
    label: 'Search',
    shouldShowIcon: true,
    buttonWidth: '120px',
    buttonHeight: '40px',
    overlayType: window.InlineAI.OverlayType.Modal,
    backdropOpacity: 0.5,
  }
);

For unmounting, SPA routing, and command-queue usage, see the programmatic control guide.

© 2026 Inline AI