Seitliche Navigation

Die seitliche Navigation zeigt das Hauptmenü deiner Website als ausklappbare Seitenleiste an. Sie bietet viel Platz für Menüpunkte und ist besonders bei umfangreichen Websites mit vielen Unterseiten praktisch.

Voraussetzungen

Du solltest deine Menüstruktur geplant haben. Die seitliche Navigation eignet sich besonders für Websites mit vielen Hauptkategorien und Unterseiten.

Aufbau der Seite

Menü-Schaltfläche

• Hamburger-Menü-Symbol zum Öffnen der Navigation
• Befindet sich meist oben links auf der Seite
• Klick öffnet die seitliche Navigation

Seitenleiste

• Erscheint von links als Overlay
• Enthält Logo, Menüpunkte und Aktionsschaltflächen
• Automatisches Schließen beim Klick außerhalb

Menüstruktur

• Hauptmenüpunkte: Direkte Links zu wichtigen Seiten
• Untermenüs: Ausklappbare Bereiche mit weiteren Links
• Symbole: Optional für jeden Menüpunkt
• Aktionsschaltflächen: Für besondere Aktionen (Kontakt, Shop)

So arbeitest du mit dieser Seite

Logo einrichten

1. Lade dein Navigationslogo in den Website-Einstellungen hoch
2. Das Logo erscheint oben in der Seitenleiste
3. Klick auf das Logo führt zur Startseite
4. Ohne Logo wird "L O G O" als Platzhalter angezeigt

Menüpunkte hinzufügen

1. Klicke auf "Menüpunkt hinzufügen"
2. Gib den Namen des Menüpunkts ein
3. Füge die Ziel-URL hinzu (z.B. /ueber-uns)
4. Optional: Wähle ein Symbol aus der Feather-Icon-Bibliothek
5. Entscheide, ob der Link in neuem Fenster öffnet

Untermenüs erstellen

1. Füge einen Hauptmenüpunkt hinzu
2. Klicke auf "Untermenü hinzufügen"
3. Erstelle die gewünschten Unterpunkte
4. Untermenüs klappen beim Klick auf den Hauptpunkt aus

Aktionsschaltflächen hinzufügen

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

Design anpassen

• Dunkles Design: Schwarzer Hintergrund für moderne Optik
• Menü zentrieren: Menüpunkte werden mittig ausgerichtet
• Logo anzeigen: Ein-/Ausblenden des Logos

Tipps und Hinweise

Menüstruktur planen:

• Maximal 7-8 Hauptmenüpunkte für Übersichtlichkeit
• Logische Gruppierung verwandter Inhalte
• Wichtigste Seiten als Hauptmenüpunkte
• Untermenüs für detailliertere Navigation

Symbole verwenden:

• Symbole machen das Menü visuell ansprechender
• Verwende einheitliche Symbol-Stile
• Symbole sollten den Inhalt verdeutlichen
• Nicht jeder Menüpunkt braucht ein Symbol

URL-Struktur:

• Verwende sprechende URLs: /ueber-uns statt /page1
• Interne Links beginnen mit /
• Externe Links mit https://
• Prüfe alle Links auf Funktionalität

Mobile Optimierung:

• Seitliche Navigation ist besonders mobilfreundlich
• Große Klickflächen für Touch-Bedienung
• Automatisches Schließen nach Link-Klick
• Optimale Darstellung auf allen Bildschirmgrößen

Benutzerfreundlichkeit:

• Klare, verständliche Menübezeichnungen
• Logische Reihenfolge der Menüpunkte
• Nicht zu viele Unterebenen (max. 2-3)
• Schnelle Ladezeiten durch optimierte Struktur

Aktionsschaltflächen:

• Verwende auffällige Farben für wichtige Aktionen
• Maximal 2-3 Aktionsschaltflächen
• Klare Handlungsaufforderungen
• Testen der Conversion-Rate

Barrierefreiheit:

• Tastaturnavigation möglich
• Screenreader-freundliche Struktur
• Ausreichende Kontraste
• Aussagekräftige Linktexte

Verwandte Seiten

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