Zum Inhalt springen
UI Kit
Accent

Navbars mit Mobile Menü und Mega Menü

Kopfzeilen für Websites und Anwendungen, jede mit eigenem Telefonmenü.

9 Variants
Kategorie wechseln

Welcher Header zu welcher Website

Die Navbar steht auf jeder Seite, sie muss also schnell lesbar und schnell bedienbar sein. Jeder der neun Header hier bringt ein eigenes Handy-Menü mit, gebaut als echter Dialog, der den Fokus hält. So finden Besucher auf dem Handy dieselben Wege wie am Desktop.

„Schlicht“ und „Minimal“ passen zu Websites mit bis zu sechs Links. „Logo mittig“ eignet sich für Marken, Restaurants und Boutiquen. „Schwebendes Glas“ und „Transparent beim Scrollen“ liegen über einem Hero-Bild und bekommen beim Scrollen einen Hintergrund. Das Mega-Menü ist für viele Produkte oder Leistungen in Gruppen, „Mit Suche“ für Shops und Dokus, „Mit Ankündigung“ für Launch oder Aktion. Die App-Kopfzeile trägt Konto und Aktionen in einer Anwendung.

Halte die Hauptlinks bei fünf oder sechs und setz die eine Aktion, auf die es ankommt, rechts als Button. Markiere die aktuelle Seite, jede Variante liest sie aus der Prop active und setzt aria-current. Teste das Handy-Menü einmal mit der Tastatur, Tab bleibt darin, bis du es schließt.

Navigation

Details

Was Navigation mitbringt, aus Registry und Quellcode gelesen.

Bereich
Layout
Variants
9
Version
1.0.0 · seit 1.0.0
Datei
components/ui/navbar.tsx
Bringt mit
utilskitbuttonicon
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 15 eigene Texte
Studio
Alle 9 Variants bearbeitbar
In Sammlungen
SaaS-Landingpage
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle NavbarProps aus components/ui/navbar.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    NavbarVariant

    simplecentered-logofloating-pill-glasswith-mega-menuwith-announcementtransparent-on-scrollwith-searchapp-headerminimal

  • brandPflicht
    { name: string; href?: string; logo?: React.ReactNode }
  • linksoptional
    NavLink[]
  • secondaryLinksoptional
    NavLink[]

    centered-logo: the links right of the logo

  • primaryActionoptional
    NavAction
  • secondaryActionoptional
    NavAction

    Usually "Sign in", shown as a quiet link

  • announcementoptional
    { tag?: string; label: string; href: string; linkLabel?: string }

    with-announcement: the bar above the navigation

  • searchoptional
    { placeholder?: string; suggestions: NavItem[] }

    with-search: placeholder and the quick links shown in the dropdown

  • appoptional
    { breadcrumb: { label: string; href: string }[]; tabs: NavLink[]; user: { name: string; email: string }; userMenu: NavItem[]; notifications?: number; }

    app-header: path, tabs and the signed-in person

  • contactoptional
    { label: string; value: string; href: string }[]

    minimal: a line in the full screen menu, e.g. an address or an email

Eingebaute Texte

Diese Texte schreibt Navigation selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 15 Texte anzeigen
openEnglisch Open menuDeutsch Menü öffnen
closeEnglisch Close menuDeutsch Menü schließen
closeShortEnglisch CloseDeutsch Schließen
mainEnglisch MainDeutsch Hauptnavigation
menuEnglisch MenuDeutsch Menü
searchEnglisch SearchDeutsch Suchen
searchShortEnglisch Search…Deutsch Suchen…
noResultsEnglisch Nothing found. Try a shorter word.Deutsch Nichts gefunden. Versuch ein kürzeres Wort.
quickLinksEnglisch Quick linksDeutsch Schnellzugriff
notificationsEnglisch NotificationsDeutsch Benachrichtigungen
accountEnglisch AccountDeutsch Konto
dismissEnglisch Dismiss announcementDeutsch Hinweis ausblenden
homeEnglisch HomeDeutsch Startseite
helpEnglisch HelpDeutsch Hilfe
contactEnglisch Get in touchDeutsch Kontakt aufnehmen

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Navigation reagiert selbst auf die Tasten Escape, Enter, Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts, Pos1, Ende, Tab und Leertaste.
  • Setzt aria-activedescendant, aria-autocomplete, aria-controls, aria-current, aria-expanded, aria-haspopup, aria-label, aria-modal und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen combobox, dialog, listbox, menu, menuitem und option.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 29 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Navigation?

Mit aiw add @ai-website/navbar. Der Befehl legt die Datei components/ui/navbar.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button und icon. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Navigation?

9 Varianten, Schlicht, Logo mittig, Schwebendes Glas, Mega-Menü, Mit Ankündigung, Transparent beim Scrollen, Mit Suche, App-Kopfzeile und Minimal. Du wählst sie mit der Prop variant, zum Beispiel variant="centered-logo".

Kann ich die Texte von Navigation übersetzen?

Ja. Navigation bringt 15 eigene Texte auf Deutsch und Englisch mit, etwa „Menü öffnen“, „Menü schließen“ und „Schließen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Navigation einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Navigation mit aiw_components und installieren sie mit aiw_add @ai-website/navbar. Nenn im Prompt die Variante, etwa variant="simple", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Navigation ohne Code anpassen?

Ja, im Studio. Alle 9 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Navbar-Code zum Kopieren.

Ähnliche Components

Mehr aus Layout, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Navbars stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert