Dark Mega Menu Navbar

Navbar53: Dark Mega Menu Navbar

Dark studio navbar on a solid bg-foreground bar whose single "Services" item opens a mega panel with three eyebrow-titled link columns and a bordered booking card carrying its own call-to-action. Plain nav links sit alongside the mega trigger, and the panel opens on hover as well as click.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar53.tsx and the button1 component it uses for the CTA and the mega panel's booking card.

Quick start

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

import { Navbar53, navbar53Demo } from "@/components/beste/block/navbar53";

export default function Layout() {
  return <Navbar53 {...navbar53Demo} />;
}

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

import { Navbar53 } from "@/components/beste/block/navbar53";

export default function Layout() {
  return (
    <Navbar53
      brand="Polaris"
      megaMenu={{
        label: "Services",
        columns: [
          {
            title: "Brand",
            links: [{ label: "Strategy & Naming", href: "/services/strategy" }],
          },
          {
            title: "Build",
            links: [{ label: "Web Engineering", href: "/services/engineering" }],
          },
        ],
        card: {
          heading: "Not sure where to start?",
          description: "Tell us about your brief and we'll map the right team.",
          cta: { label: "Book a Call", href: "/contact" },
        },
      }}
      links={[
        { label: "Work", href: "/work" },
        { label: "Journal", href: "/journal" },
      ]}
      cta={{ label: "Start a Project", href: "/contact" }}
    />
  );
}

Props

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

type MegaMenu = {
  label: string;
  columns: MegaColumn[];
  card?: MegaCard;
};

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

type MegaCard = {
  heading: string;
  description: string;
  cta: { label: string; href: string };
};

Behavior notes

• The mega trigger opens on onMouseEnter and also toggles on click; moving the mouse off the whole <header> (including the panel) closes it via onMouseLeave.
• Hovering any plain nav link closes an already-open mega panel.
• The panel is conditionally rendered only when megaMenu is set, and its open/closed state is driven by opacity, translate, and visibility classes with a 200ms transition rather than unmounting.
• Below the lg breakpoint the desktop links and mega trigger disappear in favor of a hamburger button; the mobile panel flattens the mega columns into a bordered list above the plain links and a full-width CTA button.
• The bar itself uses fixed bg-foreground/text-background tokens rather than adaptive surface tokens, so it stays a dark bar regardless of the page theme.