Mega Menu Navbar shadcn/tailwind block

Full-width sticky navbar built for SaaS and enterprise sites with deep product catalogs: any nav item can open a multi-column mega menu with icon-led links plus an optional promo card, while plain items behave as simple links. The mega panel is click-toggled (not hover) and closes on an outside click or when a link inside is chosen.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

bash

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

Base UI flavor

bash

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

This installs the block to components/beste/block/navbar19.tsx and the shadcn/ui dependency it needs (button).

Quick start

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

tsx

import { Navbar19, navbar19Demo } from "@/components/beste/block/navbar19";

export default function Layout() {
  return <Navbar19 {...navbar19Demo} />;
}

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

tsx

import { Zap } from "lucide-react";
import { Navbar19 } from "@/components/beste/block/navbar19";

export default function Layout() {
  return (
    <Navbar19
      logo={{ text: "Acme", href: "/" }}
      navItems={[
        {
          label: "Products",
          hasMegaMenu: true,
          megaMenuColumns: [
            {
              title: "Platform",
              links: [
                {
                  icon: Zap,
                  title: "Analytics",
                  description: "Track metrics in real time",
                  href: "/analytics",
                },
              ],
            },
          ],
          promoCard: {
            title: "New: AI insights",
            description: "Try the beta for free.",
            linkText: "Learn more",
            href: "/ai",
          },
        },
        { label: "Pricing", href: "/pricing" },
      ]}
      actionButtons={[
        { label: "Log in", variant: "outline", href: "/login" },
        { label: "Get started", href: "/signup" },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`logo`	`{ text: string; href?: string }`	–	Brand text and link; falls back to "Logo" / `#` when omitted
`navItems`	`NavItem[]`	`[]`	Top-level nav entries, plain links or mega menu triggers
`actionButtons`	`ActionButton[]`	`[]`	Buttons rendered at the end of the desktop bar and stacked in the mobile menu
`className`	`string`	–	Extra classes for the outer `<nav>`

type NavItem = {
  label: string;
  href?: string;
  hasMegaMenu?: boolean;
  megaMenuColumns?: MegaMenuColumn[];
  promoCard?: PromoCard;
};

type MegaMenuColumn = { title: string; links: LinkItem[] };

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

type PromoCard = {
  title: string;
  description: string;
  linkText: string;
  href?: string;
  illustration?: string;
};

type ActionButton = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

The mega panel opens on click of the trigger button, not hover; clicking the same item again, clicking outside the panel, or clicking any link/promo-card link inside it closes it. Only one mega menu can be open at a time.
The desktop mega panel is conditionally rendered ({activeMegaMenu && ...}), so it is not mounted until opened; it is not SSR-hidden markup.
The mobile breakpoint is lg (1024px). Below it, a hamburger toggles a separate mobile menu with its own independent open/close state per item (mobileOpenMenus, a Set of labels), so several mega items can be expanded at once on mobile, unlike desktop.
The bar is sticky (sticky top-0 z-50) with a translucent, blurred background (bg-background/95 backdrop-blur).
Items without hasMegaMenu render as plain links regardless of any leftover megaMenuColumns/promoCard data.

More Navigation blocks

View all Navigation

PRO

navbar54

Multi Mega Menu Navbar

Navbar where multiple items each open their own mega panel — three eyebrow-titled columns of described links with a view-all footer strip.

PRO

navbar47

Mega Menu Navbar

Studio navbar whose Work item opens a full-width mega panel with category links and three featured project thumbnails.

PRO

navbar66

Featured Mega Navbar

Mega-menu navbar whose panels lead with a featured project — a full-color image card with a parenthetical category beside a ruled link list. SSR-mounted panels and a stacked mobile menu.

PRO

navbar60

Mega Studio Navbar

Full mega-menu navbar — bold links open three-column panels with parenthetical section labels, descriptions and a footer link. SSR-mounted panels, pill CTA and a stacked mobile menu.

PRO

navbar69

Promo Mega Navbar

Airy navbar with one mega item and two plain links — its panel pairs grouped link columns with a featured promo card. A primary pill CTA plus an expanding search field that swaps in over the actions. Closes on outside click or Escape.

PRO

navbar53

Dark Mega Menu Navbar

Dark studio navbar whose Services item opens a mega panel with three eyebrow-titled link columns and a bordered booking card with a seal CTA.

Navbar19: Mega Menu Navbar