Featured Mega Navbar

Navbar66: Featured Mega Navbar

Mega-menu navbar whose dropdown items open a two-column panel led by a full-color featured project card (image, category eyebrow and title) beside a ruled list of secondary links. Panels are always mounted in the DOM and hidden with CSS rather than conditionally rendered, so they are present for SSR and only toggle visibility on interaction.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar66.tsx, the badge7 and button12 components it uses for the panel's category badge and the header CTA, and its dependencies.

Quick start

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

import { Navbar66, navbar66Demo } from "@/components/beste/block/navbar66";

export default function Layout() {
  return <Navbar66 {...navbar66Demo} />;
}

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

import { Navbar66 } from "@/components/beste/block/navbar66";

export default function Layout() {
  return (
    <Navbar66
      brand="Auralis"
      items={[
        {
          label: "Work",
          href: "/work",
          panel: {
            featured: {
              image: { src: "/case-study.jpg", alt: "Brand system spread on a table" },
              category: "Latest case study",
              title: "How Northwind found its voice",
              href: "/work/northwind",
            },
            links: [
              { label: "All projects", description: "Eighteen launches", href: "/work" },
              { label: "Brand systems", href: "/work/brand" },
            ],
          },
        },
        { label: "Journal", href: "/journal" },
      ]}
      button={{ label: "Work with us", href: "/contact" }}
    />
  );
}

Props

type NavItem = {
  label: string;
  href: string;
  panel?: {
    featured: Featured;
    links: SubLink[];
  };
};

type Featured = {
  image: { src: string; alt: string };
  category: string;
  title: string;
  href: string;
};

type SubLink = { label: string; description?: string; href: string };

Behavior notes

• Items with a panel render as a <button> (not a link) with a chevron that rotates 180° when open; hovering the button opens its panel, and clicking toggles it, while hovering a plain link closes any open panel.
• The panel closes on outside pointer-down (via a ref on the <header>) or on Escape, both wired through a single useEffect.
• The panel is absolutely positioned below the header (top-full), spans the full width, and animates with a translate/opacity transition; it is always mounted (hidden lg:block + invisible/visible), never conditionally rendered, so it is SSR-safe.
• Mega panels only appear from lg upward. Below that, the mobile menu (conditionally rendered while open) lists every item's label as a link and, for items with a panel, indents that panel's links underneath it; the featured card is not shown on mobile.