Columns Mega Navbar

Navbar81: Columns Mega Navbar

Two mega menus in one bar: each opens a full-width panel of grouped links beside a featured card with its own photograph, with plain links and a pill alongside and a nested mobile menu.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar81.tsx plus the button22 sliding-marker pill it uses.

Quick start

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

import { Navbar81, navbar81Demo } from "@/components/beste/block/navbar81";

export default function Page() {
  return <Navbar81 {...navbar81Demo} />;
}

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

import { Navbar81 } from "@/components/beste/block/navbar81";

export default function Page() {
  return (
    <Navbar81
      brand="Altair"
      megas={[
        {
          label: "Sessions",
          href: "/sessions",
          groups: [
            {
              title: "One to one",
              links: [{ label: "Individual therapy", href: "/therapy" }],
            },
          ],
          featured: {
            eyebrow: "Start here",
            title: "A twenty-minute call, free",
            href: "/call",
            linkLabel: "Book the call",
            image: { src: "/photos/pines.jpg", alt: "Pine trees in soft morning fog" },
          },
        },
      ]}
      items={[{ label: "Fees", href: "/pricing" }]}
      button={{ label: "Book", href: "/book" }}
      labels={{ open: "Open menu", close: "Close menu" }}
    />
  );
}

Props

type MegaItem = {
  label: string;
  href: string;
  groups: LinkGroup[];
  featured: Featured;
};

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

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

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

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Every panel is rendered, one per mega item, and only the open one is revealed with CSS. Nothing is mounted on hover, so all the links in all the panels are in the server-rendered HTML.
• Open state is an index rather than a boolean, so opening one panel closes the other without any extra bookkeeping.
• Hovering a plain link sets the state back to null, which closes whichever panel was open as the pointer moves along the bar.
• Escape closes both the panels and the mobile menu, and leaving the header with the pointer closes the panels.
• On a phone the groups are flattened with flatMap, so a two-level menu becomes one indented list per mega item rather than a nested accordion nobody wants to operate with a thumb.
• The mobile sections stagger through inline transitionDelay values from the index, reset to 0ms on close.
• The featured card is one Link around the whole tile, with its arrow lifting only under motion-safe:.