Mega Panel Navbar

Installation

pnpm dlx shadcn@latest add @cleverui/navbar-mega-panel

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { NavbarMegaPanel } from '@/components/blocks/navbar-mega-panel'

Exampletsx

import {
  BarChart3,
  Boxes,
  FileText,
  GitBranch,
  Shield,
  Webhook,
  Workflow,
  Zap,
} from 'lucide-react'
import { NavbarMegaPanel } from '@/components/blocks/navbar-mega-panel'

export default function NavbarMegaPanelDemo() {
  return (
    <div className="min-h-[200vh]">
      <NavbarMegaPanel
        brand={
          <span className="inline-flex items-baseline gap-1.5">
            Northline
            <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
              cloud
            </span>
          </span>
        }
        menus={[
          {
            label: 'Product',
            primary: [
              {
                icon: Workflow,
                label: 'Pipeline Studio',
                description: 'Visual DAG editor for deploy and data flows.',
                href: '#pipeline',
              },
              {
                icon: Zap,
                label: 'Instant Preview',
                description: 'Ephemeral envs from every pull request.',
                href: '#preview',
              },
              {
                icon: BarChart3,
                label: 'Observatory',
                description: 'Latency, error budgets, and deploy health.',
                href: '#observatory',
              },
              {
                icon: Shield,
                label: 'Policy Guard',
                description: 'Org-wide gates for secrets and regions.',
                href: '#policy',
              },
            ],
            secondary: [
              { label: 'Integrations', href: '#integrations' },
              { label: 'CLI & SDKs', href: '#cli' },
              { label: 'Status page', href: '#status' },
              { label: 'Changelog', href: '#changelog' },
            ],
            feature: {
              eyebrow: 'New in 3.4',
              title: 'Auto-rollback when error rates break SLO.',
              href: '#auto-rollback',
            },
          },
          {
            label: 'Solutions',
            primary: [
              {
                icon: Boxes,
                label: 'Platform teams',
                description: 'Shared golden paths without ticket queues.',
                href: '#platform',
              },
              {
                icon: GitBranch,
                label: 'Product eng',
                description: 'Ship features with preview URLs attached.',
                href: '#product-eng',
              },
              {
                icon: Webhook,
                label: 'Data & ML',
                description: 'Versioned pipelines with cost ceilings.',
                href: '#data-ml',
              },
              {
                icon: FileText,
                label: 'Compliance',
                description: 'Audit trails for SOC 2 and ISO reviews.',
                href: '#compliance',
              },
            ],
            secondary: [
              { label: 'Customer stories', href: '#stories' },
              { label: 'Migration guide', href: '#migrate' },
              { label: 'Security whitepaper', href: '#security' },
            ],
            feature: {
              eyebrow: 'Case study',
              title: 'How Helix cut deploy time from 48m to 6m.',
              href: '#helix',
            },
          },
        ]}
        links={[
          { label: 'Pricing', href: '#pricing' },
          { label: 'Docs', href: '#docs' },
        ]}
        cta={{ label: 'Start free trial', href: '#trial' }}
      />

      <div className="mx-auto max-w-6xl px-4 pt-36 sm:px-6 sm:pt-40">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Infrastructure for product teams
        </p>
        <h1 className="mt-4 max-w-2xl text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
          Open Product to see a three-zone mega panel with real IA.
        </h1>
        <p className="mt-6 max-w-lg text-base leading-relaxed text-muted-foreground">
          Primary destinations carry one-line descriptions, a secondary column holds quiet links, and a
          featured card owns the single accent. Hover between triggers to crossfade panels without
          collapsing.
        </p>
        <div className="mt-20 grid gap-4 sm:grid-cols-2">
          {['Pipeline Studio', 'Instant Preview', 'Observatory', 'Policy Guard'].map((label) => (
            <div
              key={label}
              className="flex h-28 items-end rounded-2xl border border-border/60 bg-card p-5"
            >
              <span className="text-sm font-medium text-foreground">{label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

API reference

NavbarMegaPanel accepts the following props.

Prop	Type	Default	Description
`brand`	`React.ReactNode`	`'CleverUI'`	–
`brandHref`	`string`	`'/'`	–
`menus`*	`MegaMenu[]`	–	–
`links`	`{ label: string; href: string }[]`	`[]`	–
`cta`	`{ label: string; href: string }`	–	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface MegaMenu {
  label: string
  primary: MegaPrimaryItem[]
  secondary?: MegaSecondaryItem[]
  feature?: MegaFeature
}

export interface MegaPrimaryItem {
  icon?: LucideIcon
  label: string
  description: string
  href: string
}

export interface MegaSecondaryItem {
  label: string
  href: string
}

export interface MegaFeature {
  eyebrow: string
  title: string
  href: string
}

Related components

Bottom Tabs Navbar

App-style React navigation, a thumb-reach bottom tab bar with a raised primary action on mobile that becomes a top Tailwind glass bar on desktop; one landmark, safe-area aware.

Breadcrumb Morph Navbar

An app navbar that morphs between top-level links and a breadcrumb trail as a depth prop changes, the active link travels into crumb position with layoutId continuity.

Command Center Navbar

A navbar whose centerpiece is a Cmd-K search button opening a compact command sheet, grouped destinations, arrow-key selection, quiet links flanking a keyboard-first affordance.

Glass Navbar

Header that starts as pure structure over the hero and condenses into glass on scroll, blur, hairline seam, tighter height. Accessible staggered mobile menu with Escape handling.

Pill Dock Navbar

A floating pill nav that hangs centered under the top edge, the active link carries a sliding thumb, and the whole dock condenses on scroll. App-like, not corporate.

Sidebar Hybrid Navbar

Docs-style responsive navigation, a glass top bar with a drawer on mobile becomes a left rail of grouped sections with an active keyline on lg. Skip link built in.

Frequently asked questions

How do I install the Mega Panel Navbar component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/navbar-mega-panel`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Mega Panel Navbar require?

Mega Panel Navbar uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Mega Panel Navbar to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code