Editorial Mega Menu Navbar

Navbar55: Editorial Mega Menu Navbar

Light navbar whose single "Work" item opens an editorial, three-column split panel: an eyebrow badge and statement heading with a closing CTA on the left, a numbered two-column index of project links in the middle, and a tall studio photograph on the right at wider breakpoints.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar55.tsx, the button1 and badge6 components it uses for the CTAs and the panel's eyebrow badge.

Quick start

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

import { Navbar55, navbar55Demo } from "@/components/beste/block/navbar55";

export default function Layout() {
  return <Navbar55 {...navbar55Demo} />;
}

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

import { Navbar55 } from "@/components/beste/block/navbar55";

export default function Layout() {
  return (
    <Navbar55
      brand="Polaris"
      megaMenu={{
        label: "Work",
        eyebrow: "Selected Work",
        heading: "Nine years of brands worth remembering.",
        cta: { label: "All Projects", href: "/work" },
        links: [
          { label: "Lumen Rebrand", href: "/work/lumen" },
          { label: "Verdant App", href: "/work/verdant" },
        ],
        image: { src: "/studio.jpg", alt: "Polaris studio workspace" },
      }}
      links={[
        { label: "Studio", href: "/studio" },
        { label: "Journal", href: "/journal" },
      ]}
      cta={{ label: "Start a Project", href: "/contact" }}
    />
  );
}

Props

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

type MegaMenu = {
  label: string;
  eyebrow: string;
  heading: string;
  cta: { label: string; href: string };
  links: NavLink[];
  image?: { src: string; alt: string };
};

Behavior notes

• The mega trigger opens on onMouseEnter and also toggles on click; moving off the whole <header> closes it via onMouseLeave.
• The panel is always mounted and hidden through visibility/opacity/translate transition classes rather than being conditionally rendered, matching the SSR-mounted mega pattern used across this set.
• The project index numbers links 01, 02, … in source order via String(index + 1).padStart(2, "0"); it is not a links.length dependent prop.
• The studio image only renders at the xl breakpoint and above; it stays hidden on smaller desktop widths even when the mega panel is open.
• Below lg, the mobile panel shows the mega menu's cta.href as a large heading-style link followed by its links list, then the plain links, then the full-width cta button.