Obere Navigation

Die obere Navigation zeigt das Hauptmenü deiner Website als horizontale Leiste am oberen Seitenrand an. Sie ist die klassische Form der Website-Navigation und bietet eine übersichtliche Darstellung aller wichtigen Menüpunkte.

Voraussetzungen

Du solltest deine Menüstruktur geplant haben und ein Logo für die Navigation bereithalten. Die obere Navigation eignet sich besonders für Websites mit wenigen bis mittleren Menüpunkten.

Aufbau der Seite

Navigationselemente

• Logo: Links in der Navigationsleiste, verlinkt zur Startseite
• Hauptmenü: Horizontale Liste der wichtigsten Seiten
• Untermenüs: Dropdown-Menüs bei Hover oder Klick
• Aktionsschaltflächen: Rechts positioniert für besondere Aktionen
• Mobile-Menü: Hamburger-Menü auf kleinen Bildschirmen

Layout-Optionen

• Fixiert: Navigation bleibt beim Scrollen am oberen Rand
• Volle Breite: Navigation nutzt die gesamte Bildschirmbreite
• Container: Navigation in begrenzter Breite zentriert
• Zentriert: Menüpunkte werden mittig ausgerichtet

Design-Varianten

• Helles Design: Weißer Hintergrund mit dunkler Schrift
• Dunkles Design: Schwarzer Hintergrund mit weißer Schrift
• Automatische Anpassung an das Website-Theme

So arbeitest du mit dieser Seite

Logo einrichten

1. Lade dein Navigationslogo in den Website-Einstellungen hoch
2. Empfohlene Größe: 200x60 Pixel (Breite x Höhe)
3. Das Logo wird automatisch auf 64 Pixel Höhe skaliert
4. PNG-Format mit transparentem Hintergrund ist ideal

Menüpunkte hinzufügen

1. Klicke auf "Menüpunkt hinzufügen"
2. Gib einen aussagekräftigen Namen ein
3. Füge die Ziel-URL hinzu:
   • Interne Seiten: /ueber-uns, /kontakt
   • Externe Links: https://example.com
4. Optional: Wähle ein Symbol aus der Feather-Icon-Bibliothek

Dropdown-Menüs erstellen

1. Füge einen Hauptmenüpunkt hinzu
2. Klicke auf "Untermenü hinzufügen"
3. Erstelle die gewünschten Unterpunkte
4. Das Dropdown öffnet sich beim Hover über den Hauptpunkt

Aktionsschaltflächen einrichten

1. Klicke auf "Aktion hinzufügen"
2. Gib den Schaltflächentext ein (z.B. "Jetzt buchen")
3. Füge die Ziel-URL hinzu
4. Wähle Farbe und Stil der Schaltfläche
5. Aktionen erscheinen rechts in der Navigation

Mobile Navigation

• Auf kleinen Bildschirmen wird automatisch ein Hamburger-Menü angezeigt
• Klick öffnet ein ausklappbares Menü
• Alle Menüpunkte und Aktionen bleiben verfügbar

Tipps und Hinweise

Menüplanung:

• Maximal 5-7 Hauptmenüpunkte für optimale Übersicht
• Wichtigste Seiten direkt im Hauptmenü
• Weniger wichtige Seiten in Untermenüs
• Logische Gruppierung verwandter Inhalte

Menübezeichnungen:

• Kurze, prägnante Namen verwenden
• Verständliche Begriffe wählen
• Konsistente Bezeichnungen
• Keywords für SEO berücksichtigen

Dropdown-Menüs:

• Nicht zu viele Unterpunkte (max. 8-10)
• Logische Reihenfolge der Unterpunkte
• Ähnliche Unterpunkt-Anzahl pro Hauptmenü
• Teste die Bedienbarkeit auf verschiedenen Geräten

Aktionsschaltflächen:

• Maximal 2-3 Aktionen für Übersichtlichkeit
• Auffällige Farben für wichtige Aktionen
• Klare Handlungsaufforderungen
• Teste die Conversion-Rate

Design-Entscheidungen:

• Fixierte Navigation: Gut für lange Seiten
• Volle Breite: Modern, nutzt gesamten Platz
• Zentriert: Klassisch, fokussiert auf Inhalt
• Dunkles Design: Modern, elegant

Mobile Optimierung:

• Teste die Navigation auf verschiedenen Geräten
• Große Klickflächen für Touch-Bedienung
• Schnelle Ladezeiten wichtig
• Einfache Bedienung mit einer Hand

Barrierefreiheit:

• Tastaturnavigation ermöglichen
• Ausreichende Kontraste verwenden
• Aussagekräftige Alt-Texte für Logos
• Screenreader-freundliche Struktur

Verwandte Seiten

• Seitliche Navigation - Alternative Navigationsform
• Standard-Header - Übergeordnete Navigation
• Standard-Footer - Ergänzende Navigation