Use-Case Mega Navbar

Navbar61: Use-Case Mega Navbar

Navbar with a pill-shaped wordmark row where a trigger item drops a floating, rounded mega panel instead of a full-bleed strip: a parenthetical badge sits above a 3x2 grid of icon use-case cards. A muted sign-in pill sits next to the primary CTA button on the right.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar61.tsx, the badge7 and button12 components it uses for the panel badge and its CTA, and its dependencies.

Quick start

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

import { Navbar61, navbar61Demo } from "@/components/beste/block/navbar61";

export default function Layout() {
  return <Navbar61 {...navbar61Demo} />;
}

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

import { Rocket, Layers } from "lucide-react";
import { Navbar61 } from "@/components/beste/block/navbar61";

export default function Layout() {
  return (
    <Navbar61
      brand="Northwind"
      items={[
        {
          label: "Who it's for",
          href: "/who",
          panel: {
            badge: { label: "By the room you sit in" },
            cards: [
              { icon: Rocket, title: "Seed-stage builders", description: "Ready before the raise closes.", href: "/seed" },
              { icon: Layers, title: "Product squads", description: "Screens shipped with your engineers.", href: "/product" },
            ],
          },
        },
        { label: "Notebook", href: "/notebook" },
      ]}
      login={{ label: "Sign in", href: "/login" }}
      button={{ label: "Book a call", href: "/contact" }}
    />
  );
}

Props

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

type MegaPanel = {
  badge: { label: string };
  cards: PanelCard[];
};

type PanelCard = {
  icon: LucideIcon;
  title: string;
  description: string;
  href: string;
};

An item only opens a panel when panel is set; otherwise it renders as a plain link.

Behavior notes

• Items with panel render as a rounded-full button: hovering (onMouseEnter) or clicking opens the panel; clicking again while open closes it. Hovering a plain link resets activeIndex, closing any open panel.
• Like the mega panels are always mounted in the DOM and switched between invisible/visible with an opacity/translate transition rather than conditionally rendered, so panel content is present in the server-rendered HTML.
• The panel closes on outside pointerdown or on Escape, via a document-level listener attached only while a panel is open.
• Unlike a full-bleed strip, the panel is a bordered, rounded, shadowed card constrained to the max-w-7xl container, floating just below the nav row.
• The card grid uses md:grid-cols-3 (3x2 for a 6-card panel), each card an icon square, a title, and a description, the whole card wrapped in a link.
• The mobile menu (below lg) lists each panel's card titles as plain indented links beneath the item's own link; it drops the icons and descriptions.