Shadcn Navbar: Mega-Menü, Mobile-Menü, Sticky Header

Du brauchst eine shadcn Navbar für eine SaaS-Seite: Logo, Dropdowns für Produkt und Ressourcen samt Mega-Menü, Preise, Anmelden, Loslegen, eine Leiste, die beim Scrollen oben bleibt, und ein Smartphone-Menü, das nicht nach Notlösung aussieht. shadcn/ui gibt dir für den Desktop-Teil das Navigation Menu (opens in a new tab). Die Doku-Seite (Stand 5. November 2026) behandelt die Teile des Menüs und das Einbinden des Link von Next.js, zu Smartphones sagt sie nichts. Smartphone-Menü, Sticky-Leiste und Layout Shift bleiben an dir hängen.

Dieser Guide baut diese Navbar mit zwei Komponenten von Wingo UI: dem Nav Menu für einen eigenen Header und dem Marketing Header, wenn du alles fertig haben willst. Wir bauen diese Bibliothek, sind also nicht neutral. Jedes Snippet nutzt die echten Props, und beide Komponenten sind kostenlos.

Was braucht eine shadcn Navbar auf einer SaaS-Seite?

Fünf Dinge, und die letzten beiden machen die meiste Arbeit:

1. Eine Leiste mit fester Höhe. 56 oder 64px, das Logo am Anfang, ein oder zwei Aktionen am Ende. Die Höhe ändert sich nach dem Laden nie.
2. Dropdown-Panels. Eine kurze Liste für Ressourcen, ein Mega-Menü für Produkt: Icons, einzeilige Beschreibungen, zwei Spalten, vielleicht eine Featured-Karte für den neuesten Launch.
3. Tastaturbedienung. Tab erreicht jeden Trigger und jeden Link, die Pfeiltasten wechseln dazwischen, Escape schließt ein Panel und gibt den Fokus zurück.
4. Ein echtes Smartphone-Menü. Alle Links, die Panels als aufklappbare Gruppen, Anmelden und Loslegen als Buttons in voller Breite, Zeilen hoch genug für einen Daumen.
5. Kein Layout Shift. Schon das HTML vom Server muss das passende Layout für den Bildschirm zeigen, und ein geöffnetes Panel oder Smartphone-Menü darf die Seite nicht verschieben.

Navbar-Galerien verkaufen fertige Layouts. shadcnblocks (opens in a new tab) listet über 21 Navbar-Blöcke neben seinem All-Access-Angebot, und die Resizable Navbar (opens in a new tab) von Aceternity schrumpft und bekommt einen Blur-Effekt, sobald die Seite scrollt, bringt ein eigenes Mobile-Menü mit und lässt sich mit der shadcn CLI installieren (beides Stand 5. November 2026). Die Seite von Aceternity dokumentiert Props, sagt aber nichts zu Tastatur oder Fokus. Suchst du ein auffälliges Layout zum Nachbauen, sind diese Galerien ein guter Startpunkt. Willst du das Verhalten aus den Punkten 3 bis 5 fertig haben, lies weiter.

Wie baust du eine shadcn Navbar mit Mega-Menü?

Beschreib die Links als Daten und gib sie an das Nav Menu: Ein Eintrag mit items wird zum Dropdown, columns und featured machen daraus ein Mega-Menü. Installier es zuerst:

npx wingo-ui@latest add nav-menu

Die CLI kopiert components/ui/nav-menu.tsx und die Dateien von Wingo UI, die es importiert: Sheet und Accordion für das Smartphone-Menü, Button, Badge, die Motion-Helfer und die gemeinsamen Navigations-Helfer in lib/navigation.tsx. Außerdem installiert sie die nötigen npm-Pakete, darunter @radix-ui/react-navigation-menu, motion und lucide-react.

Mit reinen Daten bleibt ein Next.js Mega Menu gut lesbar. Ein Eintrag, der nur ein href hat, ist ein einfacher Link in der Leiste.

// components/site-header.tsx
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { BookOpen, ChartColumn, FileText, LifeBuoy, Newspaper, Send, Wallet } from "lucide-react"
import { Button } from "@/components/ui/button"
import { NavMenu, type NavMenuItem } from "@/components/ui/nav-menu"
import { NavLink } from "@/lib/navigation"

const items: NavMenuItem[] = [
  {
    label: "Produkt",
    href: "/product",
    columns: 2,
    items: [
      { label: "Rechnungen", href: "/product/invoicing", icon: <FileText />, description: "Rechnungen und Angebote in 30 Sekunden" },
      { label: "E-Rechnung", href: "/product/e-invoicing", icon: <Send />, description: "Automatisch versendet und validiert" },
      { label: "Zahlungen", href: "/product/payments", icon: <Wallet />, description: "Kartenzahlungen und Bankabgleich" },
      { label: "Berichte", href: "/product/reports", icon: <ChartColumn />, description: "Umsatzsteuer, offene Posten und Cashflow" },
    ],
    featured: {
      title: "Neu: E-Rechnungen automatisch versendet",
      description: "Jede Rechnung erreicht deine Kunden ohne einen Klick extra.",
      image: "/images/e-invoicing.jpg",
      href: "/changelog/e-invoicing",
    },
  },
  {
    label: "Ressourcen",
    items: [
      { label: "Anleitungen", href: "/guides", icon: <BookOpen />, description: "Schritt für Schritt, mit Screenshots" },
      { label: "Blog", href: "/blog", icon: <Newspaper />, description: "Produktneuigkeiten und Tipps" },
      { label: "Hilfe-Center", href: "/help", icon: <LifeBuoy />, description: "Antworten in 2 Minuten" },
    ],
  },
  { label: "Preise", href: "/pricing" },
  { label: "Kontakt", href: "/contact" },
]

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-sticky border-b border-foreground/10 bg-background px-4 md:px-6">
      <NavMenu
        items={items}
        currentPath={usePathname()}
        linkComponent={Link}
        logo={
          <NavLink href="/" component={Link} className="text-[15px] font-semibold">
            SimpleInvoice
          </NavLink>
        }
        actions={
          <>
            <Button variant="ghost" size="sm" asChild>
              <NavLink href="/sign-in" component={Link}>Anmelden</NavLink>
            </Button>
            <Button size="sm" asChild>
              <NavLink href="/sign-up" component={Link}>Loslegen</NavLink>
            </Button>
          </>
        }
      />
    </header>
  )
}

Setz <SiteHeader /> oben in dein Root-Layout. Weil Produkt ein eigenes href hat, beginnt sein Panel mit einer Zeile „View all“, die zu /product führt. currentPath markiert den aktiven Link (das längste passende href) und gibt dem Eintrag der obersten Ebene darüber den aktiven Look. In Next.js kannst du Link-Komponente und Pfad mit einem LinkProvider aus @/lib/navigation einmal für alle Navigationskomponenten setzen und linkComponent und currentPath im Aufruf weglassen.

Welche Props sind am wichtigsten?

• viewport (Standard true): ein gemeinsames Panel, das zwischen den Triggern gleitet und sich an den neuen Inhalt anpasst, der Header im Stil von Stripe. Mit false öffnet sich jedes Panel als eigene Fläche unter seinem Trigger.
• indicator: "pill" (Standard), "underline" oder "none", die Hervorhebung, die dem Mauszeiger folgt und auf dem aktiven Bereich stehen bleibt.
• size: "md" ergibt eine 64px hohe Leiste mit 36px Triggern, "sm" eine 56px hohe Leiste mit 32px Triggern. Auf Touchscreens wachsen die Trigger auf 44px.
• mobileBreakpoint: "md" (768px, Standard) oder "lg" (1024px) für Menüs, die nicht auf ein Tablet passen.
• delayDuration (150ms) und skipDelayDuration (300ms): wie lange der Mauszeiger ruhen muss, bevor sich ein Panel öffnet, und das Zeitfenster, in dem sich das nächste sofort öffnet. So blitzen keine Menüs auf, wenn der Cursor nur über die Leiste fährt.

Wie machst du das shadcn Navigation Menu mobile-tauglich?

Unter dem Breakpoint ersetzt ein Menü-Button die Links. Er öffnet ein Vollbild-Sheet mit allen Links, jedes Dropdown als Akkordeon-Abschnitt. Für eine responsive shadcn Navbar ist das genau die Hälfte, die shadcn/ui dir überlässt; das Nav Menu erledigt sie in derselben Komponente, und sein Menü-Button ersetzt auch die Aktionen. Ein Tipp darauf, und von rechts gleitet ein Vollbild-Sheet herein:

• oben das Logo, damit sich das Menü weiter nach deiner Seite anfühlt;
• ein Akkordeon-Abschnitt pro Dropdown, der Abschnitt, in dem du gerade bist, schon aufgeklappt;
• 48px hohe Zeilen, die Featured-Karte als kompakte Zeile;
• deine actions unten untereinander in voller Breite (mit mobileActions setzt du dort andere ein).

Ein gewählter Link, der Schließen-Button, ein Wisch nach rechts oder Escape schließen es. Solange das Menü offen ist, hält es den Fokus im Menü und sperrt das Scrollen der Seite; modal={false} setzt du nur für eingebettete Vorschauen. Ein Detail, das man leicht übersieht: Ist das Smartphone-Menü offen und wächst der Bildschirm über den Breakpoint (ein Tablet, das ins Querformat gedreht wird), schließt das Nav Menu es. So bleibt niemand mit einem Vollbild-Overlay über einem Desktop-Layout zurück.

Wann ist ein Drawer von unten das bessere Smartphone-Menü?

Wenn die Seite vier oder fünf einfache Links und keine Dropdowns hat. Ein Vollbild-Menü ist dafür zu viel, und ein Bottom Sheet hält die Links in Reichweite des Daumens. Bau es mit dem Drawer und schließ es von jedem Link aus mit DrawerClose:

"use client"

import Link from "next/link"
import { Menu } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Drawer, DrawerClose } from "@/components/ui/drawer"
import { NavLink } from "@/lib/navigation"

const links = [
  { label: "Funktionen", href: "/features" },
  { label: "Preise", href: "/pricing" },
  { label: "Blog", href: "/blog" },
]

export function PhoneMenu() {
  return (
    <Drawer
      title="Menü"
      hideTitle
      trigger={
        <Button variant="ghost" size="icon" radius="full" aria-label="Menü öffnen" className="md:hidden">
          <Menu />
        </Button>
      }
      footer={
        <Button size="lg" fullWidth asChild>
          <NavLink href="/sign-up" component={Link}>Loslegen</NavLink>
        </Button>
      }
    >
      <nav aria-label="Hauptnavigation" className="flex flex-col">
        {links.map((link) => (
          <DrawerClose asChild key={link.href}>
            <NavLink href={link.href} component={Link} className="flex min-h-12 items-center rounded-[12px] px-3 text-[15px] font-medium hover:bg-foreground/5">
              {link.label}
            </NavLink>
          </DrawerClose>
        ))}
      </nav>
    </Drawer>
  )
}

Der Trigger blendet sich ab 768px mit md:hidden aus; die Desktop-Links in deiner Leiste bekommen hidden md:flex. Beides ist CSS, und genau das zählt bei der nächsten Frage.

Wie hältst du eine Sticky-Navbar frei von Layout Shift?

Entscheide das Layout per CSS, damit schon das HTML vom Server stimmt, halte Panels und Scroll-Sperren aus dem Seitenfluss heraus, gleiche Ankersprünge um die Höhe der Leiste aus und lass diese Höhe konstant. Das sind die vier üblichen Ursachen für Layout Shift in einer responsiven Next.js Navbar, jeweils mit Lösung.

Der Server rendert das falsche Layout. Ein useIsMobile()-Hook liefert auf dem Server false. Ein Smartphone bekommt also zuerst die Desktop-Links und wechselt erst nach der Hydration zum Hamburger. Das Nav Menu entscheidet stattdessen mit CSS Container Queries auf der Leiste, das HTML vom Server ist auf einem Smartphone also schon das Smartphone-Layout. Ein Nebeneffekt: Der Breakpoint richtet sich nach der Breite der Leiste, ein Header in einer schmalen Spalte klappt also auch auf einem breiten Bildschirm zusammen.

Das Panel schiebt Inhalt weg. Panels rendern in einem absolut positionierten Viewport unter der Leiste. Ein geöffnetes Panel verschiebt die Seite darunter also nie.

Die Scroll-Sperre verschiebt die Seite. Wird beim Öffnen eines Menüs die Scrollbar ausgeblendet, wird die Seite um deren Breite breiter. Das Sheet basiert auf Radix Dialog, der Drawer auf vaul, das Radix Dialog umhüllt. Die Scroll-Sperre von Radix Dialog gleicht diese Breite als Abstand wieder aus, und die Seite bleibt, wo sie ist.

Anker landen unter der Leiste. Ein Sprung zu #pricing scrollt die Überschrift an den oberen Rand des Viewports, hinter deine Sticky-Leiste. Eine Zeile CSS behebt das:

/* app/globals.css: die Leiste ist 64px hoch */
html {
  scroll-padding-top: 4rem;
}

Halte auch die Höhe der Leiste konstant. Soll sie nach dem Scrollen anders aussehen, ändere Hintergrund oder Schatten, denn die verschieben nichts.

Wie steht es um Tastatur und Screenreader?

Das Nav Menu ist komplett per Tastatur bedienbar und rendert eine beschriftete nav-Landmark, kein Anwendungsmenü. Es sitzt auf der Navigation-Menu-Primitive von Radix, und die Radix-Doku (opens in a new tab) (Stand 5. November 2026) erklärt, warum es bewusst auf die WAI-ARIA-Rolle menu verzichtet: Menüs bringen zusammengesetztes Fokus-Management und Navigation per Anfangsbuchstabe mit, die eine Website-Navigation nicht braucht. Im Nav Menu erreicht Tab jeden Trigger und jeden Link, ArrowLeft und ArrowRight wechseln zwischen den Triggern, Enter oder Leertaste öffnen ein Panel, ArrowDown öffnet es und springt auf den ersten Link, und Escape schließt es und gibt den Fokus an den Trigger zurück. Das nav trägt ein aria-label (standardmäßig „Main“, in labels.navigation), der Menü-Button wechselt zwischen „Open menu“ und „Close menu“, und bei reduzierter Bewegung blenden Panels nur ein, ohne zu gleiten.

Der Marketing Header ergänzt einen Link „Skip to content“ als ersten Tab-Stopp, der über skipTo standardmäßig auf #main zeigt.

Solltest du stattdessen den Marketing Header nehmen?

Ja, wenn du einen fertigen SaaS-Header willst statt einzelner Teile. Er umhüllt das Nav Menu mit Logo, Anmelde- und Start-Button, einem optionalen Ankündigungsstreifen, dem Skip-Link und Beispiel-Navigation und bringt drei Layouts mit (default, centered, pill) sowie drei Looks (glass macht die Seite unter der Sticky-Leiste unscharf, solid, transparent für einen Hero).

npx wingo-ui@latest add marketing-header

import { MarketingHeader } from "@/components/blocks/marketing-header"

<MarketingHeader
  items={items}
  linkComponent={Link}
  currentPath={usePathname()}
  announcement="SimpleInvoice 3.0 ist da: E-Rechnung und Berichte"
  announcementHref="/changelog"
  ctaTone="brand"
/>

Ein Unterschied, den du kennen solltest: Der Marketing Header klappt schon unter 1024px ins Smartphone-Menü, denn eine volle SaaS-Leiste mit zwei Aktionen passt selten auf ein Tablet. Brauchst du den Wechsel bei 768px, nimm wie oben direkt das Nav Menu.

Wie geht es nach der Navbar weiter?

Die Navbar steht oben auf jeder Seite, es lohnt sich also, sie einmal richtig zu bauen. Der Guide zur Next.js SaaS Landing Page geht die Abschnitte darunter durch, der Guide zum SaaS Website Template behandelt die Seiten, auf die die Navbar verlinkt, und die Vorlage Landing Page bringt diesen Marketing Header schon mit. Die Kategorie Praxis: Screens und Apps und ihr Pillar-Artikel, das Next.js Admin Dashboard Tutorial, behandeln die Screens hinter dem Loslegen-Button.

Marketing Header, Nav Menu, Sheet und Drawer sind alle kostenlos. Führ npx wingo-ui@latest add marketing-header aus, setz dein Logo und deine Links ein und teste das Ganze auf einem echten Smartphone.

Häufige Fragen

Hat shadcn/ui eine responsive Navbar?

Nicht als eine Komponente. shadcn/ui hat ein Navigation Menu für die Desktop-Links und Panels, und die Doku (Stand 5. November 2026) sagt nichts zu Hamburger-Menü oder Smartphone-Layout. Das Smartphone-Menü ergänzt du also selbst mit einem Sheet, oder du installierst einen Navbar-Block aus einer Galerie.

Wie mache ich das shadcn Navigation Menu mobile-tauglich?

Blende das Navigation Menu unter einem Breakpoint per CSS aus und zeig stattdessen einen Menü-Button, der ein Sheet mit denselben Links öffnet: jedes Dropdown als Akkordeon-Abschnitt, jede Zeile mindestens 44px hoch. Schließ das Sheet, sobald ein Link gewählt wird und sobald der Bildschirm über den Breakpoint wächst.

Wie baue ich ein Mega-Menü in Next.js?

Gib einem Eintrag der obersten Ebene eine Liste von Unterlinks mit Icons und Beschreibungen, ordne sie in zwei oder drei Spalten an und ergänze eine Featured-Karte. Mit dem Nav Menu von Wingo UI sind das reine Daten: ein Eintrag mit items, columns: 2 und featured: { title, href, image }.

Warum verdeckt meine Sticky-Navbar Überschriften, wenn ich zu einem Anker springe?

Der Browser scrollt das Ziel an den oberen Rand des Viewports, also unter die Sticky-Leiste. Setz scroll-padding-top auf das html-Element, mit der Höhe der Leiste, zum Beispiel 4rem für eine 64px hohe Leiste.

Ist die Navbar von Wingo UI kostenlos?

Ja. Marketing Header, Nav Menu, Sheet und Drawer sind alle kostenlos, und npx wingo-ui@latest add marketing-header kopiert den Header samt allem, was er importiert, als Quellcode in dein Projekt.