Expanding Search Bar

Navbar105: Expanding Search Bar

A bar with the brand, a Categories dropdown and plain links, plus a search icon that grows into a wide input and pushes the links aside as it opens. On a phone the search field takes over the bar and the filtered list of links beneath it is the menu.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/navbar105?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/navbar105?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/navbar105.tsx plus the shadcn button and input primitives it uses.

Quick start

The installed file exports navbar105Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.

import { Navbar105, navbar105Demo } from "@/components/beste/block/navbar105";

export default function Page() {
  return <Navbar105 {...navbar105Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Navbar105 } from "@/components/beste/block/navbar105";

export default function Page() {
  return (
    <Navbar105
      brand="Fieldnote"
      categories={{
        label: "Categories",
        columns: [
          {
            title: "Notebooks",
            links: [
              { label: "Pocket notebooks", href: "/notebooks/pocket" },
              { label: "Hardcover journals", href: "/notebooks/hardcover" },
            ],
          },
          {
            title: "Desk",
            links: [
              { label: "Pens and pencils", href: "/desk/pens" },
              { label: "Planners", href: "/desk/planners" },
            ],
          },
        ],
      }}
      links={[
        { label: "New", href: "/new" },
        { label: "Stories", href: "/stories" },
      ]}
      button={{ label: "Cart", href: "/cart", variant: "outline" }}
      labels={{ search: "Search", close: "Close search", placeholder: "Search products and pages", noResults: "Nothing matches that yet.", pages: "Pages" }}
    />
  );
}

Props

type CategoryColumn = {
  title: string;
  links: NavItem[];
};

type NavItem = {
  label: string;
  href: string;
};

type ActionButton = {
  label: string;
  href: string;
  variant?: "default" | "outline" | "ghost" | "secondary";
};

Behavior notes

• The Categories card, the desktop results card, the mobile search layer and the mobile results panel are all server-rendered and always in the markup; each is shown or hidden with CSS classes rather than mounted on demand.
• The desktop search is a form whose width transitions from w-8 to w-72; the input sits inside it and only fades in, and because the links ml-auto toward it, growing the field pushes them left.
• Opening the search focuses the right input for the viewport on the next frame; a (min-width: 768px) media query picks between the desktop and mobile inputs.
• The result list is one shared element: every category link plus the plain links, filtered by the query in client state. With an empty query it renders every link, which is what the server sends.
• Escape closes both the search and the dropdown; a click outside the header closes both; the pointer leaving the header closes only the dropdown so a half-typed search is never dismissed.
• On a phone the search layer sits absolute inset-0 over the bar and the result panel drops under it, capped at calc(100vh - 4rem) with its own scroll; links in either close everything on click.