Promo Mega Navbar

Navbar69: Promo Mega Navbar

Airy navbar with one mega-menu item and plain links either side; its panel pairs badge-labeled link columns with a featured promo card (heading, link and square image). The header also carries a primary pill CTA plus a search trigger that, on click, swaps the CTA/search icon pair out (kept mounted but invisible so the layout never shifts) for an absolutely positioned expanding search field anchored to the right edge, which auto-focuses itself and closes on outside click or Escape.

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/navbar69?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/navbar69.tsx, the badge7 and button12 components it uses for the panel's group titles and the CTA pill, and its dependencies.

Quick start

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

import { Navbar69, navbar69Demo } from "@/components/beste/block/navbar69";

export default function Layout() {
  return <Navbar69 {...navbar69Demo} />;
}

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

import { Navbar69 } from "@/components/beste/block/navbar69";

export default function Layout() {
  return (
    <Navbar69
      brand="Auralis"
      items={[
        { label: "How we work", href: "/how-we-work" },
        {
          label: "What we make",
          href: "/services",
          panel: {
            groups: [
              {
                title: "Disciplines",
                links: [
                  { label: "Brand foundations", href: "/services/brand" },
                  { label: "Interfaces & UI", href: "/services/ui" },
                ],
              },
            ],
            featured: {
              heading: "Two seats left in our spring cohort.",
              linkLabel: "See what's involved",
              href: "/cohort",
              image: { src: "/cohort.jpg", alt: "Designer reviewing brand boards" },
            },
          },
        },
      ]}
      button={{ label: "See if we fit", href: "/contact" }}
      searchPlaceholder="Find work, notes or people…"
    />
  );
}

Props

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

type MegaPanel = {
  groups: LinkGroup[];
  featured: Featured;
};

type LinkGroup = { title: string; links: NavLink[] };

type Featured = {
  heading: string;
  linkLabel: string;
  href: string;
  image: { src: string; alt: string };
};

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

Behavior notes

• Items with a panel render as a <button> with a rotating chevron; hovering opens the panel, clicking toggles it, and hovering a plain link closes any open panel. The panel is absolutely positioned (top-full, full width) and always mounted, toggling visible/invisible with a translate/opacity transition rather than being conditionally rendered, so it is SSR-safe.
• Clicking the search icon opens the search field and closes any open mega panel (setActiveIndex(null)); the field is an absolute overlay anchored to the right edge of the nav so opening it never reflows the header. A dedicated useEffect focuses the input as soon as searchOpen becomes true.
• Both the mega panel and the search field share one outside-click/Escape handler: a pointerdown outside the <header> ref, or an Escape keydown, closes whichever is open.
• The CTA button and search trigger are kept mounted at all times and only toggled invisible while searching, rather than being removed, to avoid any layout shift when the search overlay appears.
• Mega panels and the search trigger/overlay only appear at lg and up. Below that, the mobile menu (conditionally rendered while open) shows its own always-visible search input at the top, followed by every item's label as a link, with panel groups flattened into one indented link list per item.