Search Menu

Overview

SearchMenu is a reusable command-palette component built on shadcn's Command primitive. Pass it grouped items and it renders a responsive search trigger, ⌘K/Ctrl+K shortcut handling, searchable groups, optional item icons, descriptions, and shortcuts.

Features

• Generic grouped item input
• Optional item icons, descriptions, keywords, disabled state, and shortcuts
• Per-item onSelect handlers plus a top-level onSelect callback
• Controlled or uncontrolled open state
• Mobile icon-only trigger and desktop search-bar trigger

Usage

import { SearchMenu, type SearchMenuGroup } from "@/components/ui/search-menu";
import { FileText, Settings } from "lucide-react";

const groups: SearchMenuGroup[] = [
  {
    heading: "Pages",
    items: [
      {
        id: "docs",
        label: "Docs",
        description: "Open documentation",
        icon: <FileText className="size-4" />,
        onSelect: () => navigate({ to: "/docs" }),
      },
    ],
  },
  {
    heading: "Settings",
    items: [
      {
        id: "profile",
        label: "Profile",
        icon: <Settings className="size-4" />,
      },
    ],
  },
];

<SearchMenu
  groups={groups}
  title="Search"
  description="Search pages and actions."
  placeholder="Search..."
/>