Multi Mega Menu Navbar

Navbar54: Multi Mega Menu Navbar

Light navbar where more than one top-level item can carry its own mega panel: any items entry with a non-empty columns array becomes a hover/click trigger, while entries without columns render as plain links. Each panel lists eyebrow-titled columns of described links and an optional "view all" footer strip with an arrow.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar54.tsx and the button1 component it uses for the CTA.

Quick start

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

import { Navbar54, navbar54Demo } from "@/components/beste/block/navbar54";

export default function Layout() {
  return <Navbar54 {...navbar54Demo} />;
}

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

import { Navbar54 } from "@/components/beste/block/navbar54";

export default function Layout() {
  return (
    <Navbar54
      brand="Polaris"
      items={[
        { label: "Work", href: "/work" },
        {
          label: "Services",
          href: "/services",
          footerLabel: "Explore all services",
          footerHref: "/services",
          columns: [
            {
              title: "Design",
              links: [
                { label: "Brand Identity", description: "Naming and systems", href: "/services/brand" },
              ],
            },
            {
              title: "Build",
              links: [
                { label: "Web Engineering", description: "Fast front-ends", href: "/services/web" },
              ],
            },
          ],
        },
        { label: "Journal", href: "/journal" },
      ]}
      cta={{ label: "Start a Project", href: "/contact" }}
    />
  );
}

Props

type NavItem = {
  label: string;
  href: string;
  columns?: MegaColumn[];
  footerLabel?: string;
  footerHref?: string;
};

type MegaColumn = { title: string; links: SubLink[] };
type SubLink = { label: string; description?: string; href: string };
type CtaLink = { label: string; href: string };

Behavior notes

• Each item's panel opens on onMouseEnter over its trigger and toggles on click; moving the mouse off the whole header closes whichever panel is open, tracked by a single activeIndex state.
• Every mega panel is always mounted in the DOM and hidden purely with visibility/opacity/translate classes, so panels are SSR-present rather than conditionally rendered — only one is visible at a time via activeIndex.
• An item's footer strip (arrow link) only renders when both footerLabel and footerHref are set on that item.
• Below the lg breakpoint the desktop items and hamburger swap in; the mobile panel flattens each item's columns links into a bordered sublist directly under that item's own link.