Search-Focused Navbar

Navbar32: Search-Focused Navbar

Navbar built around a prominent inline search field for marketplaces, directories, and content platforms where discovery is the primary action, alongside a small link group and a single call-to-action button.

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://ui.beste.co/r/navbar32?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/navbar32?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/navbar32.tsx and the shadcn/ui dependencies it needs (button, input).

Quick start

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

import { Navbar32, navbar32Demo } from "@/components/beste/block/navbar32";

export default function Layout() {
  return <Navbar32 {...navbar32Demo} />;
}

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

import { Navbar32 } from "@/components/beste/block/navbar32";

export default function Layout() {
  return (
    <Navbar32
      logo={{ text: "Marketplace", href: "/" }}
      navItems={[
        { label: "Browse", href: "/browse" },
        { label: "Trending", href: "/trending" },
      ]}
      searchPlaceholder="Search listings..."
      onSearch={(query) => console.log("search", query)}
      actionButton={{ label: "Post a listing", href: "/new" }}
    />
  );
}

Props

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

Behavior notes

• Submitting an empty or whitespace-only query is ignored; a non-empty query logs to the console (console.log("Search:", searchQuery)) in addition to calling onSearch.
• The desktop and mobile search inputs are bound to the same searchQuery state, so typing in either one updates both; only one is visible at a time based on the lg breakpoint.
• The desktop search bar has a fixed width (w-64) with a rounded container; the mobile search bar is full-width and fully rounded (rounded-full).
• The mobile breakpoint is lg (1024px). Below it, the hamburger opens a panel with search on top, nav links below, and the action button pinned at the bottom behind a divider.
• The bar is sticky (sticky top-0 z-50) with a solid bg-background and a bottom border, no blur.