Masthead Navigation With Mega Panel

Navbar75: Masthead Navigation With Mega Panel

A publication masthead where one section link opens a full width panel, split by hairlines into the newest issue and two indexed columns. The panel is always in the markup and revealed with CSS, so its links are readable without JavaScript.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar75.tsx and the button1 component it uses for the subscribe pill (installed to components/beste/component/button1.tsx).

Quick start

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

import { Navbar75, navbar75Demo } from "@/components/beste/block/navbar75";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Navbar75 {...navbar75Demo} />
      {children}
    </>
  );
}

Then replace the demo with your own props. Only the link that should open a panel carries mega:

import { Navbar75 } from "@/components/beste/block/navbar75";

export default function SiteHeader() {
  return (
    <Navbar75
      wordmark="Polaris"
      links={[
        {
          label: "Writing",
          href: "/writing",
          mega: {
            feature: {
              image: { src: "/issues/042.jpg", alt: "Issue 042" },
              meta: "Issue 042 · out this morning",
              title: "The quote we lost on purpose",
              href: "/letters/042",
            },
            columns: [
              {
                title: "By format",
                links: [
                  { label: "Essays", description: "86 published", href: "/essays" },
                  { label: "Templates", description: "14 published", href: "/templates" },
                ],
              },
            ],
            footnote: "186 pieces published since 2023.",
          },
        },
        { label: "Archive", href: "/archive" },
      ]}
      button={{ label: "Subscribe", href: "/subscribe" }}
    />
  );
}

Props

type NavLink = {
  label: string;
  href: string;
  mega?: MegaMenu;
};

type MegaMenu = {
  feature?: MegaFeature;
  columns?: MegaColumn[];
  footnote?: string;
};

type MegaFeature = {
  image: { src: string; alt: string };
  meta: string;
  title: string;
  href: string;
};

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

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

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

Behavior notes

• The mega panel is rendered on every request and hidden with invisible opacity-0, not mounted on hover. Its links are therefore in the server HTML, which is what search engines and a client with JavaScript disabled see.
• It opens on group-hover/mega and on group-focus-within/mega, so tabbing into the section reveals the same panel a pointer does.
• The trigger wrapper is static while the container is relative. That is what lets the panel span the full container width instead of the width of the menu item it belongs to.
• The chevron rotates 180 degrees while the panel is open, driven by the same group rather than by state.
• Panel cells are separated by real hairlines: the grid uses gap-px over bg-border, so the background shows through the gaps instead of each cell drawing its own border.
• The mobile menu is the one part that is conditional. It is toggled with useState, and a link's mega columns appear there as an indented list under the section rather than as a panel.
• Only links that carry mega become panel triggers; the rest render as plain links, so a masthead can have one panel or several.