devsnips
Search docs, APIs, guides…

Component

Search Navigation

Search-focused navigation with filters and category pills. Perfect for file managers, docs, and content platforms.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Large search input
  • Filter action buttons
  • Category pills/chips
  • Icon integration

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/navigation/search-navigation/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Navigation/search-navigation
registry path: Tailwind/Components/Navigation/search-navigation

Source

Implementation

code.html 
<div class="relative">
  <div class="flex items-center gap-3">
    <!-- Search Input -->
    <div class="relative flex-1">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
      </svg>
      <input type="text" placeholder="Search for anything..." class="w-full pl-12 pr-4 py-3.5 bg-white border border-gray-200 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent shadow-sm">
    </div>
    
    <!-- Filter Buttons -->
    <div class="hidden sm:flex items-center gap-2">
      <button class="px-4 py-3.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
        </svg>
        Filters
      </button>
      <button class="px-4 py-3.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        Date Range
      </button>
    </div>
  </div>

  <!-- Quick Filters -->
  <div class="flex items-center gap-2 mt-4 overflow-x-auto pb-2">
    <button class="px-3 py-1.5 text-sm font-medium bg-gray-900 text-white rounded-full whitespace-nowrap">All</button>
    <button class="px-3 py-1.5 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-full whitespace-nowrap transition-colors">Documents</button>
    <button class="px-3 py-1.5 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-full whitespace-nowrap transition-colors">Images</button>
    <button class="px-3 py-1.5 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-full whitespace-nowrap transition-colors">Videos</button>
    <button class="px-3 py-1.5 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-full whitespace-nowrap transition-colors">Audio</button>
    <button class="px-3 py-1.5 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-full whitespace-nowrap transition-colors">Links</button>
  </div>
</div>
37 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/navigation/search-navigation
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/navigation/search-navigation/

Install: npx devsnips add
Tailwind/Components/Navigation/search-navigation

This is the Search Navigation — Search-focused navigation with filters and category pills. Perfect for file managers, docs, and content platforms.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/navigation/search-navigation