Dual Mode Search Bar

IMPROVED PRODUCT DISCOVERY WITH AI

Dual Mode Search Bar

What it is

A drop-in search box with a toggle between your native search and Nobi’s AI search. It provides multiple display modes, customizable styling, and merchant-friendly CSS classes.

When to use

Home, site header, high-intent landing pages.

Basic Usage

<nobi-assistant
  variant="search-bar"
  default-mode="site"
  size="regular"
  cta-variant="auto"
  show-mode-toggle="true"
  show-hint-row="true"
></nobi-assistant>

Configuration Options

Core Attributes

Attribute
Type
Default
Description
variant
string
-
Must be "search-bar" for AI Search Bar
default-mode
string
"site"
Initial search mode: "site" or "ai"
size
string
"regular"
Component size: "regular" or "compact"
cta-variant
string
"auto"
Button style: "auto", "icon", or "button"
show-mode-toggle
boolean
true
Whether to show the mode toggle
show-hint-row
boolean
true
Whether to show hint row with shortcuts
site-search-path
string
"/search"
Path for site search navigation

Icon Trigger Mode

Attribute
Type
Default
Description
show-icon
boolean
false
Enable icon trigger mode
icon-url
string
null
Custom icon URL (optional)
start-collapsed
boolean
false
Start collapsed in icon mode

Examples

Dual Mode Search Bar

<nobi-assistant
  variant="search-bar"
  default-mode="site"
  size="regular"
  cta-variant="auto">
 </nobi-assistant>

Compact Bar

<nobi-assistant
  variant="search-bar"
  size="compact"
  cta-variant="icon"
  show-hint-row="false">
</nobi-assistant>

Icon Triggers the Search Bar

<nobi-assistant
  variant="search-bar"
  show-icon="true"
  start-collapsed="true"
  size="compact">
 </nobi-assistant>

AI-First Mode

<nobi-assistant
  variant="search-bar"
  default-mode="ai"
  cta-variant="button"
  site-search-path="/pages/search"
></nobi-assistant>

Styling with Public Class Names

The AI Search Bar provides numerous CSS classes for comprehensive styling customization. All public class names are prefixed with nobi- for consistency.

Main Container Classes

/* Style the main search bar container */
.nobi-search-bar {
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Size variants */
.nobi-search-bar-compact {
  max-width: 400px;
}

.nobi-search-bar-regular {
  max-width: 600px;
}

/* Mode-specific styling */
.nobi-search-bar-ai-mode {
  border-color: #8B5CF6;
  background: linear-gradient(135deg, #F3E8FF 0%, #FFFFFF 100%);
}

.nobi-search-bar-default-mode {
  border-color: #D1D5DB;
}

Input Field Styling

/* Style the search input */
.nobi-search-bar-input {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  padding: 12px 16px;
}

.nobi-search-bar-input::placeholder {
  color: #9CA3AF;
  font-style: italic;
}

Button Styling

/* Style all search buttons consistently */
.nobi-search-bar-button {
  transition: all 0.2s ease;
  font-weight: 600;
}

.nobi-search-bar-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Button size variants */
.nobi-search-bar-button-compact {
  padding: 6px 12px;
  font-size: 12px;
}

.nobi-search-bar-button-regular {
  padding: 10px 20px;
  font-size: 14px;
}

/* Button type variants */
.nobi-search-bar-button-icon {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

/* Mode-specific button styling */
.nobi-search-bar-button-ai {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  color: white;
}

.nobi-search-bar-button-default {
  background: #111827;
  color: white;
}

Mode Toggle Styling

/* Style the mode toggle container */
.nobi-search-bar-mode-toggle {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
}

/* Individual toggle buttons */
.nobi-search-bar-mode-button {
  transition: all 0.2s ease;
  font-weight: 500;
}

.nobi-search-bar-mode-button-selected {
  background: white;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nobi-search-bar-mode-button-unselected {
  color: #6B7280;
}

.nobi-search-bar-mode-button:hover {
  background: #F3F4F6;
}

Icon Trigger Styling

/* Style the icon trigger */
.nobi-search-bar-icon {
  background: white;
  border: 2px solid #E5E7EB;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.nobi-search-bar-icon:hover {
  border-color: #8B5CF6;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Icon mode container */
.nobi-search-bar-icon-mode {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

/* Expandable mode */
.nobi-search-bar-expandable {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Hint Row Styling

/* Style the hint row */
.nobi-search-bar-hint-row {
  background: #F9FAFB;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}

.nobi-search-bar-hint-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6B7280;
  font-size: 12px;
}

.nobi-search-bar-hint-label {
  color: #111827;
  font-weight: 600;
}

/* Keyboard shortcut styling */
.nobi-search-bar-shortcut-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nobi-search-bar-shortcut-key {
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: #374151;
}

.nobi-search-bar-shortcut-description {
  font-size: 11px;
  color: #9CA3AF;
}

Advanced Styling Examples

Themed Search Bar

/* Dark theme */
.nobi-search-bar {
  background: #1F2937;
  border-color: #374151;
}

.nobi-search-bar-input {
  background: transparent;
  color: white;
}

.nobi-search-bar-input::placeholder {
  color: #9CA3AF;
}

.nobi-search-bar-mode-toggle {
  background: #374151;
  border-color: #4B5563;
}

.nobi-search-bar-mode-button-selected {
  background: #4B5563;
  color: white;
}

Branded Search Bar

/* Brand colors */
.nobi-search-bar-ai-mode {
  border-color: #FF6B35;
}

.nobi-search-bar-button-ai {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
}

.nobi-search-bar-mode-button-selected {
  background: #FF6B35;
  color: white;
}

.nobi-search-bar-icon:hover {
  border-color: #FF6B35;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

Mobile-Optimized Styling

@media (max-width: 768px) {
  .nobi-search-bar {
    border-radius: 16px;
    margin: 0 16px;
  }

  .nobi-search-bar-input {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .nobi-search-bar-icon-mode {
    bottom: 16px;
    right: 16px;
  }

  .nobi-search-bar-hint-row {
    display: none; /* Hide hints on mobile */
  }
}

CSS Custom Properties

The search bar supports CSS custom properties for easy theming:
.nobi-search-bar {
  /* Border radius */
  --nobi-search-bar-border-radius: 16px;

  /* Button styling */
  --nobi-search-bar-button-background: #111827;
  --nobi-search-bar-button-border-radius: 12px;
  --nobi-search-bar-button-text-color: #ffffff;
  --nobi-search-bar-button-font-family: 'Inter', sans-serif;
}

Class Reference

Container Classes

  • .nobi-search-bar - Main container
  • .nobi-search-bar-compact - Compact size variant
  • .nobi-search-bar-regular - Regular size variant
  • .nobi-search-bar-ai-mode - AI mode styling
  • .nobi-search-bar-default-mode - Default mode styling
  • .nobi-search-bar-icon-mode - Icon trigger mode
  • .nobi-search-bar-expandable - Expandable mode container

Input Classes

  • .nobi-search-bar-input - Search input field

Button Classes

  • .nobi-search-bar-button - All buttons
  • .nobi-search-bar-button-compact - Compact button
  • .nobi-search-bar-button-regular - Regular button
  • .nobi-search-bar-button-icon - Icon button
  • .nobi-search-bar-button-compact-icon - Compact icon button
  • .nobi-search-bar-button-ai - AI mode button
  • .nobi-search-bar-button-default - Default mode button

Mode Toggle Classes

  • .nobi-search-bar-mode-toggle - Toggle container
  • .nobi-search-bar-mode-toggle-compact - Compact toggle
  • .nobi-search-bar-mode-toggle-regular - Regular toggle
  • .nobi-search-bar-mode-button - Individual toggle button
  • .nobi-search-bar-mode-button-compact - Compact toggle button
  • .nobi-search-bar-mode-button-regular - Regular toggle button
  • .nobi-search-bar-mode-button-selected - Selected state
  • .nobi-search-bar-mode-button-unselected - Unselected state

Icon Classes

  • .nobi-search-bar-icon - Icon triggers

Hint Row Classes

  • .nobi-search-bar-hint-row - Hint container
  • .nobi-search-bar-hint-info - Info section
  • .nobi-search-bar-hint-label - Mode labels
  • .nobi-search-bar-shortcut-section - Shortcut section
  • .nobi-search-bar-shortcut-key - Keyboard shortcut key
  • .nobi-search-bar-shortcut-description - Shortcut description

Integration Notes

  • The search bar automatically handles keyboard shortcuts (Cmd/Ctrl + K to toggle modes)
  • Icon trigger mode provides click-outside-to-close functionality
  • Site search mode navigates to the configured search path with query parameters
  • AI mode integrates with the Nobi chat system for AI-powered search responses
  • All animations and transitions respect user motion preferences