# Shadcn Navbar: Mega-Menü, Mobile-Menü, Sticky Header
> So baust du eine responsive shadcn Navbar in Next.js: Dropdowns und Mega-Menü auf dem Desktop, ein Vollbild-Menü unter 768px, sticky und per Tastatur bedienbar.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 5. Nov. 2026
- Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/shadcn-navbar
- Englische Fassung: https://wingo-ui.com/blog/shadcn-navbar
## Kurz gesagt
Eine gute shadcn Navbar hat drei Teile: eine Sticky-Leiste mit fester Höhe, Dropdown- oder Mega-Menü-Panels, die sich bei Hover und per Tastatur öffnen, und ein eigenes Smartphone-Menü mit allen Links. shadcn/ui liefert das Navigation Menu als Primitive, aber kein Smartphone-Menü, das kombinierst du selbst mit einem Sheet. Das kostenlose Nav Menu von Wingo UI erledigt Panels und Smartphone-Menü in einer Komponente: ein mitwanderndes Panel auf dem Desktop, ein Vollbild-Menü mit Akkordeon unter 768px, gesteuert über CSS Container Queries, damit schon das HTML vom Server stimmt.
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](https://ui.shadcn.com/docs/components/navigation-menu). 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](https://wingo-ui.com/components/nav-menu) für einen eigenen Header und dem [Marketing Header](https://wingo-ui.com/components/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](https://www.shadcnblocks.com/blocks/navbar) listet über 21 Navbar-Blöcke neben seinem All-Access-Angebot, und die [Resizable Navbar](https://ui.aceternity.com/components/resizable-navbar) 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:
```bash
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](https://wingo-ui.com/components/sheet) und [Accordion](https://wingo-ui.com/components/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.
```tsx
// 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: , description: "Rechnungen und Angebote in 30 Sekunden" },
{ label: "E-Rechnung", href: "/product/e-invoicing", icon: , description: "Automatisch versendet und validiert" },
{ label: "Zahlungen", href: "/product/payments", icon: , description: "Kartenzahlungen und Bankabgleich" },
{ label: "Berichte", href: "/product/reports", icon: , 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: , description: "Schritt für Schritt, mit Screenshots" },
{ label: "Blog", href: "/blog", icon: , description: "Produktneuigkeiten und Tipps" },
{ label: "Hilfe-Center", href: "/help", icon: , description: "Antworten in 2 Minuten" },
],
},
{ label: "Preise", href: "/pricing" },
{ label: "Kontakt", href: "/contact" },
]
export function SiteHeader() {
return (
SimpleInvoice
}
actions={
<>
}
/>
)
}
```
Setz `` 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.
> Live-Demo (Nav Menu): Fahr über Produkt und dann weiter zu Ressourcen: Ein einziges Panel folgt dem Mauszeiger, ändert seine Größe und tauscht den Inhalt. In einer schmalen Spalte wandern die Links in den Menü-Button. Probier sie unter [Nav Menu](https://wingo-ui.com/components/nav-menu) aus und installier sie mit `npx wingo-ui@latest add nav-menu`.
### 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](https://wingo-ui.com/components/drawer) und schließ es von jedem Link aus mit `DrawerClose`:
```tsx
"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 (
}
footer={
}
>
)
}
```
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:
```css
/* 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](https://www.radix-ui.com/primitives/docs/components/navigation-menu) (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](https://wingo-ui.com/components/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).
```bash
npx wingo-ui@latest add marketing-header
```
```tsx
import { MarketingHeader } from "@/components/blocks/marketing-header"
```
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.
> Live-Demo (Marketing Header): Scroll in der Vorschau: Die Leiste bleibt oben und lässt unscharf durchscheinen, was darunter vorbeizieht. Tipp auf den Menü-Button für das Smartphone-Menü, dann drück Escape oder wisch es weg. Probier sie unter [Marketing Header](https://wingo-ui.com/components/marketing-header) aus und installier sie mit `npx wingo-ui@latest add marketing-header`.
## 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](https://wingo-ui.com/de/blog/nextjs-saas-landing-page) geht die Abschnitte darunter durch, der [Guide zum SaaS Website Template](https://wingo-ui.com/de/blog/saas-website-template) behandelt die Seiten, auf die die Navbar verlinkt, und die [Vorlage Landing Page](https://wingo-ui.com/templates/landing-page) bringt diesen Marketing Header schon mit. Die Kategorie [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build) und ihr Pillar-Artikel, das [Next.js Admin Dashboard Tutorial](https://wingo-ui.com/de/blog/nextjs-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.
## Komponenten in diesem Artikel
- [Marketing Header](https://wingo-ui.com/components/marketing-header) (Free): A React marketing header for a SaaS site: a sticky navbar with logo, dropdown panels, Sign in, Get started, a news strip and a phone menu. Installation: `npx wingo-ui@latest add marketing-header`
- [Nav Menu](https://wingo-ui.com/components/nav-menu) (Free): A React navigation menu for websites: links and dropdown panels, lists or mega menus with a featured card, morphing through one panel. Installation: `npx wingo-ui@latest add nav-menu`
- [Sheet](https://wingo-ui.com/components/sheet) (Free): A React sheet that slides in from any edge on a spring for filters, a cart, an inspector or phone navigation, swipeable to close on touch. Installation: `npx wingo-ui@latest add sheet`
- [Drawer](https://wingo-ui.com/components/drawer) (Free): A React drawer and bottom sheet built on vaul: drag to dismiss, snap points, nesting, and a side panel or dialog on desktop. Installation: `npx wingo-ui@latest add drawer`
## 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.
---
Quelle: https://wingo-ui.com/de/blog/shadcn-navbar