Navigation Bar – Hauptnavigation im UI-Design

Eine Navigation Bar (Navbar) ist die primäre Navigationskomponente eines Interfaces, die dem Nutzer dauerhaften Zugang zu den Hauptbereichen einer Anwendung oder Website gibt und typischerweise am oberen Rand (Web) oder unteren Rand (Mobile-App) positioniert ist.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Navbar, Header Navigation, Top Navigation, Bottom Navigation Bar, Tab Bar (iOS), App Bar (Android)

Was ist eine Navigation Bar?

Die Navigation Bar ist das strukturierende Herzstück jedes digitalen Produkts. Sie kommuniziert die Informationsarchitektur auf höchster Ebene und gibt dem Nutzer jederzeit die Möglichkeit, zwischen Hauptbereichen zu wechseln. Gut designte Navigationsbars sind persistent (immer sichtbar), klar beschriftet und hierarchisch verständlich – sie reduzieren die kognitive Last und ermöglichen effiziente Orientierung.

Erklärung

Varianten

Top Navigation Bar (Web-Standard): Horizontale Leiste am oberen Seitenrand. Enthält Logo/Brand links, Haupt-Navigationspunkte in der Mitte oder links, sekundäre Aktionen rechts (Suche, Login, CTA-Button). Standard für Desktop-Websites.

Bottom Navigation Bar (Mobile-Standard): Horizontale Leiste am unteren Bildschirmrand. 3–5 Icons mit Labels. Durch Daumen-Erreichbarkeit auf Smartphones bevorzugt. iOS Tab Bar und Android Bottom Navigation sind dieser Kategorie zuzuordnen.

Sticky Navbar: Bleibt beim Scrollen fixiert am oberen Rand sichtbar. Verbessert Zugang zur Navigation, reduziert Scrollaufwand für Rückkehr zum Menü. Kann bei langen Seiten den Lesebereich einschränken.

Transparent/Ghost Navbar: Initial transparent über einem Hero-Bild, wird beim Scrollen undurchsichtig. Ästhetisch ansprechend, aber potenziell schwer lesbar auf bestimmten Hintergrundbildern.

Mega Menu Navbar: Bei Klick auf einen Hauptnavigationspunkt öffnet sich ein großes Dropdown-Panel mit allen Sub-Kategorien, oft mit Icons und gruppierten Links. Typisch für große E-Commerce-Seiten und Content-Sites.

Responsive / Hamburger Navigation: Ab einem bestimmten Breakpoint werden die Navbar-Links in einem Hamburger-Menü (≡) zusammengefasst. Klick öffnet ein Drawer-Menü oder Full-Screen-Overlay.

Anatomie einer Top Navigation Bar

• Brand Area: Logo und/oder Markenname (links positioniert, klickbar → Home)
• Primary Navigation Links: Hauptbereiche der Site (3–7 Punkte ideal)
• Secondary Actions: Suche, Sprachumschalter, Dark-Mode-Toggle
• CTA-Button: Hervorgehobener Call-to-Action (Login, Registrieren, Kaufen)
• User Menu: Avatar/Profilbild mit Dropdown für Account-Aktionen

States von Navigation Items

Accessibility (WCAG 2.1)

• Navigation als <nav> Element wrappen – automatisch role="navigation"
• Bei mehreren <nav> Elementen: aria-label zur Unterscheidung: aria-label="Hauptnavigation" vs. aria-label="Footer-Navigation"
• Aktiver Zustand: aria-current="page" auf dem Link der aktuellen Seite
• Skipnav-Link: <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a> als erstes Element der Seite – unsichtbar bis Fokus
• Hamburger-Button: aria-expanded="false/true", aria-controls="nav-menu-id", aria-label="Navigation öffnen/schließen"
• Keyboard: Alle Links per Tab erreichbar, Enter öffnet Links/Submenüs
• Mega Menu: Submenü mit role="region" oder role="menu" je nach Interaktionsmuster

Beispiele

1. Notion – Top Navigation: Minimale horizontale Navbar mit Workspace-Switcher links, Suchleiste mittig, Quick-Actions rechts. Sekundäre Navigation erfolgt über die Sidebar. Das Zusammenspiel von minimaler Top-Nav und ausführlicher Sidebar ist ein modernes Pattern für komplexe Tools.
2. Airbnb – Top Navigation Desktop: Logo links, Suchleiste mittig (prominentester Bereich, da primäre Aktion = Suchen), Nutzer-Menü rechts. Beim Scrollen wird die Navbar schmaler und nimmt eine kompaktere Form an.
3. Mobile vs. Desktop – iOS App: Instagram Bottom Tab Bar mit 5 Items: Home, Suche, Reels erstellen, Aktivität, Profil. Jeder Tab mit Icon, aktiver Tab hervorgehoben. Daumen-optimiert. Kein Text-Label nötig, da Icons hinreichend bekannt sind.
4. Accessibility Best Practice: UK Government (gov.uk) implementiert die Skipnav-Funktion vorbildlich – erster Tab-Stop ist immer ein sichtbar werdender „Skip to main content"-Link. Navigation mit vollständig korrektem aria-current="page".
5. Häufiger Fehler: Active-State nur durch Farbe signalisieren ohne aria-current="page". Screenreader können dann nicht die aktuelle Position kommunizieren. Zweiter Fehler: Hamburger-Button ohne aria-expanded – Screenreader weiß nicht, ob das Menü offen oder geschlossen ist.

In der Praxis

Figma: Navigation Bar als Komponente mit Auto Layout (Horizontal). Breakpoint-Variants (Desktop 1440 px, Tablet 768 px, Mobile 375 px). Navigation Items als eigene Sub-Komponente mit States. Logo als Image-Placeholder. Hamburger-Button für Mobile als Boolean-Property showHamburger.

HTML/CSS-Grundstruktur: ```html <!-- Skipnav (WCAG-Pflicht!) --> <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<header> <nav aria-label="Hauptnavigation"> <a href="/" class="brand-logo" aria-label="Lazi-Akademie – Zur Startseite"> <img src="logo.svg" alt="Lazi-Akademie Logo" width="120" height="40"> </a>

<!-- Hamburger Button (Mobile) --> <button type="button" class="hamburger-btn" aria-expanded="false" aria-controls="primary-nav" aria-label="Navigation öffnen" > <span class="hamburger-icon" aria-hidden="true">≡</span> </button>

<ul id="primary-nav" class="nav-list"> <li><a href="/" aria-current="page">Startseite</a></li> <li><a href="/kurse">Kurse</a></li> <li><a href="/wiki">Wiki</a></li> <li><a href="/ueber-uns">Über uns</a></li> </ul>

<div class="nav-actions"> <a href="/login" class="btn btn-secondary">Anmelden</a> </div> </nav> </header>

<main id="main-content"><!-- Hauptinhalt --></main> ```

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wie viele Navigationspunkte sind optimal für eine Top-Navigation? Die Cognitive Load-Forschung empfiehlt 5–7 Hauptnavigationspunkte (Hicks Law und Miller's Law). Unter 5 wirkt die Struktur unvollständig, über 7 verlieren Nutzer den Überblick. Bei mehr als 7 Bereichen: Gruppierung in Mega-Menus oder Auslagerung in eine Sidebar-Navigation erwägen.

Wann ist eine Sticky Navbar sinnvoll? Sticky Navbars sind empfehlenswert, wenn Nutzer häufig zwischen Bereichen wechseln (z. B. E-Commerce, Dashboard) und die Seiten lang sind. Sie sind weniger sinnvoll auf kurzen Seiten (ohnehin schnell zurückgescrollt) und auf Seiten mit vielen Bildern/Videos, bei denen der vertikale Platz wertvoll ist. Mobile: immer abwägen – Sticky-Nav auf kleinen Screens kostet viel Anzeigeraum.

Verwandte Einträge

• Sidebar Navigation
• Breadcrumb
• Tabs
• Pagination

Weiterführend

• Nielsen Norman Group – „Navigation Design": nngroup.com/articles/navigation-design
• Material Design 3 – Navigation Bar: m3.material.io/components/navigation-bar
• Apple Human Interface Guidelines – Tab Bars: developer.apple.com/design/human-interface-guidelines/tab-bars
• WebAIM – Accessible Navigation: webaim.org/techniques/skipnav