Dark Three-Column Mega Navbar

Navbar70: Dark Three-Column Mega Navbar

Inverted bg-foreground navbar (dark surface, light text) whose mega panel spreads across three columns divided by hairline rules: an intro pitch with a heading, description and outline CTA; a numbered index list of links; and a full-color featured image tile with its own heading and outline button overlaid on a dark scrim. Outline-tone pill CTAs are used throughout, including inside the panel, and the same expanding right-anchored search field and mega-panel mechanics as navbar69 are reused here on the dark palette.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar70.tsx, the button12 component it uses for the header, panel and mobile CTAs, and its dependencies.

Quick start

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

import { Navbar70, navbar70Demo } from "@/components/beste/block/navbar70";

export default function Layout() {
  return <Navbar70 {...navbar70Demo} />;
}

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

import { Navbar70 } from "@/components/beste/block/navbar70";

export default function Layout() {
  return (
    <Navbar70
      brand="Auralis"
      items={[
        {
          label: "Work",
          href: "/work",
          panel: {
            heading: "Find the work that fits your moment",
            description: "A decade of brand, product and motion, built to ship on real deadlines.",
            primary: { label: "Browse the work", href: "/work" },
            list: [
              { label: "Naming & language", href: "/work/naming" },
              { label: "Marks & wordmarks", href: "/work/marks" },
            ],
            featured: {
              heading: "See what we shipped this season",
              button: { label: "Recent launches", href: "/work/recent" },
              image: { src: "/launches.jpg", alt: "Crowd lit by stage lights at a live event" },
            },
          },
        },
        { label: "Studio", href: "/studio" },
      ]}
      button={{ label: "Have a project", href: "/contact" }}
      searchPlaceholder="Search products and projects…"
    />
  );
}

Props

type NavItem = { label: string; href: string; panel?: MegaPanel };

type MegaPanel = {
  heading: string;
  description: string;
  primary: ActionLink;
  list: NavLink[];
  featured: {
    heading: string;
    button: ActionLink;
    image: { src: string; alt: string };
  };
};

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

Behavior notes

• The whole header uses bg-foreground/text-background (and background/NN opacity variants for borders and muted text) instead of the usual bg-background/text-foreground pairing, so it renders as a fixed-dark surface regardless of site theme.
• Items with a panel render as a <button> with a rotating chevron; hovering opens the panel, clicking toggles it, hovering a plain link closes any open panel. The panel is absolutely positioned full-width below the header and always mounted, toggling visible/invisible with a translate/opacity transition rather than conditional rendering.
• Inside an open panel, the numbered list column prefixes each entry with a zero-padded index (01, 02, …) and reveals an arrow icon only on hover; the featured column overlays its heading and button on the image behind a bg-black/45 scrim.
• Clicking the search icon opens an absolutely positioned, right-anchored search field (auto-focused via useEffect) while the CTA/search-icon group is kept mounted but set invisible, so the header never reflows. A single outside-pointerdown/Escape handler closes whichever of the mega panel or search field is open.
• Mega panels and the search trigger only appear at lg and up. Below that, the mobile menu (conditionally rendered while open) shows an always-visible dark-styled search input first, then every item's label as a link with panel list entries indented underneath, then the full-width outline CTA.