TYPO3 - Sticky Navigation: Unterschied zwischen den Versionen

Anleitung
Anleitung
Informationen
Betriebssystem	Alle
Service	TYPO3
Interessant für	Angestellte
HilfeWiki des ZIM der Uni Paderborn

Aktuelle Version vom 23. Oktober 2025, 08:12 Uhr

TYPO3

Allgemeine Informationen

Die Sticky-Navigation befindet sich direkt unter der Bühne und bleibt beim Scrollen sichtbar am oberen Bildschirmrand kleben ("sticky"). Sie dient als primäre Orientierungshilfe für die Inhalte der aktuellen Webseite und organisiert die Seite in logische Abschnitte.

Wichtig: Die Sticky-Navigation ist eine interne Seiten-Navigation – sie hilft Besucher*innen, zwischen verschiedenen Inhaltsteilen einer einzelnen Seite zu springen.

Wann sollte die Sticky-Navigation verwendet werden?[Bearbeiten | Quelltext bearbeiten]

Wenn die Seite aus mehreren großen inhaltlichen Abschnitten besteht (z. B. „Über uns“, „Projekte“, „Kontakt“).
Um eine übersichtliche Struktur innerhalb einer Seite zu schaffen.
Wenn die Zielgruppe durch eine klare Navigation schneller zum gewünschten Inhalt gelangen soll.
Um inhaltliche Schwerpunkte oder Zielgruppenbereiche sichtbar zu machen.

Nicht geeignet für: Kurze Seiten mit nur wenigen Abschnitten oder Seiten, die keine klar strukturierten Inhaltsbereiche aufweisen.

Wie wird die Sticky Navigation erstellt?[Bearbeiten | Quelltext bearbeiten]

Die Sticky-Navigation wird automatisch generiert, sobald bestimmte Voraussetzungen erfüllt sind:

Es müssen mindestens zwei Inhaltselemente mit einer H2-Überschrift vorhanden sein.
Jedes solche Element generiert automatisch einen Menüpunkt in der Sticky-Navigation.
Der Text der H2-Überschrift wird standardmäßig als Menüpunkt verwendet.

⚠Die Sticky-Navigation wird nicht angezeigt, wenn weniger als zwei H2-Überschriften vorhanden sind.

Einstellungsmöglichkeiten für Inhaltselemente[Bearbeiten | Quelltext bearbeiten]

Sie können die Darstellung der Sticky-Navigation individuell anpassen – allerdings nur, wenn das jeweilige Inhaltselement diese Option unterstützt.

So finden Sie die Einstellungen:

Öffnen Sie das Inhaltselement im Bearbeitungsmodus.
Wechseln Sie zum Reiter „Allgemein“.

Überschrift in der Navigation deaktivieren Wenn dieser Haken gesetzt ist, wird das Element nicht in der Sticky-Navigation sichtbar. Nutzen Sie dies z. B. für Überschriften, die nur zur visuellen Gliederung dienen, aber keinen eigenständigen Inhaltsteil repräsentieren.
Alternativen Navigationstitel festlegen Statt der H2-Überschrift kannst du einen eigenen, kürzeren oder präziseren Titel für die Navigation eingeben. Ideal für:
- Langwierige Überschriften (z. B. „Unsere zukunftsorientierten Forschungsprojekte im Bereich Künstliche Intelligenz“ → „Forschung & KI“).
- Konsistente Formulierungen (z. B. „Kontakt“ statt „Kontaktformular“).

Empfehlungen für eine gute Sticky-Navigation[Bearbeiten | Quelltext bearbeiten]

Die Sticky-Navigation ist kein Ersatz für eine klare Seitenstruktur. Sie funktioniert nur, wenn die Inhalte bereits gut gegliedert sind. Achten Sie daher auf eine sinnvolle Gliederung mit H2-Überschriften – erst dann wird die Navigation sinnvoll.


Kriterium		Empfehlung
Anzahl der Menüpunkte		Maximal 5–7 Punkte – mehr erschwert die Übersicht
Länge der Titel		Maximal 3–5 Wörter. Kurz, präzise, verständlich
Inhaltliche Relevanz		Jeder Menüpunkt sollte einen wichtigen Sinnabschnitt der Seite repräsentieren.
Konsistenz		Nutze einheitliche Formulierungen (z. B. immer „Veranstaltungen“ statt „Events“ und „Veranstaltungen“).
Lesbarkeit		Vermeide Fachbegriffe, wenn die Zielgruppe nicht spezialisiert ist.

Beispiel:

❌ „Zusammenarbeit mit internationalen Partnern im Rahmen von EU-Förderprojekten“

✅ „Internationale Kooperationen“

Wie kann ich die Sticky Navigation komplett ausblenden?[Bearbeiten | Quelltext bearbeiten]

Die Sticky-Navigation kann über die Seiteneigenschaften einer Seite komplett ausgeblendet werden.

Öffnen Sie die Seiteneigenschaften einer Seite.
Klicken Sie auf den Reiter "Erscheinungsbild".
Aktivieren Sie den Toggle "Sticky Nav ausblenden"
Speichern Sie.

Siehe auch[Bearbeiten | Quelltext bearbeiten]

Bei Fragen oder Problemen können Sie uns zu unseren Servicezeiten telefonisch oder per E-Mail erreichen:

☎ Helpdesk: +49 (5251) 60-5544 • ☎ Medien: +49 (5251) 60-2821 • E-Mail: zim@uni-paderborn.de

Oder Sie besuchen uns vor Ort: Sie finden das Notebook-Café gemeinsam mit dem Servicecenter Medien in H1.201.

Servicezeiten

	Mo - Do	Fr
Vor-Ort-Support	08:30 - 16:00	08:30 - 14:00
Telefonsupport	08:30 - 16:00	08:30 - 14:00
Servicecenter Medien	08:30 - 16:00	08:30 - 14:00

@@ Zeile 5: / Zeile 5: @@
 |hasdisambig=Nein
 }}
-{{template caller‏‎
-|marker=Draft
-}}
-{{template caller‏‎
-|marker=Stub
-}}
 Die '''Sticky-Navigation''' befindet sich direkt unter der Bühne und bleibt beim Scrollen sichtbar am oberen Bildschirmrand kleben (''"sticky"''). Sie dient als '''primäre Orientierungshilfe''' für die Inhalte der aktuellen Webseite und organisiert die Seite in logische Abschnitte.
 '''Wichtig:''' Die Sticky-Navigation ist eine '''interne Seiten-Navigation''' – sie hilft Besucher*innen, zwischen verschiedenen Inhaltsteilen einer einzelnen Seite zu springen.
-[[Datei:Sticky Navigation Browseransicht.png|zentriert|mini|559x559px|Sticky Navigation – Browser Ansicht]]
+[[Datei:Sticky Navigation Browseransicht.png|mini|559x559px|Sticky Navigation – Browser Ansicht|alternativtext=|links]]
-[[Datei:Sticky Navigation Mobile Ansicht.png|mini|Sticky Navigation_Mobile Ansicht|alternativtext=|links|rand]]
+[[Datei:Sticky Navigation Mobile Ansicht.png|mini|Sticky Navigation_Mobile Ansicht|alternativtext=|links]]
@@ Zeile 35: / Zeile 45: @@
+<bootstrap_accordion>
-==== Wann sollte die Sticky-Navigation verwendet werden? ====
+<bootstrap_panel heading="==== Wann sollte die Sticky-Navigation verwendet werden? ====">
 * Wenn die Seite aus mehreren '''großen inhaltlichen Abschnitten''' besteht (z. B. „Über uns“, „Projekte“, „Kontakt“).
 * Um eine '''übersichtliche Struktur''' innerhalb einer Seite zu schaffen.
 * Wenn die Zielgruppe durch eine klare Navigation '''schneller zum gewünschten Inhalt''' gelangen soll.
 * Um '''inhaltliche Schwerpunkte''' oder Zielgruppenbereiche sichtbar zu machen.
-'''Nicht geeignet für:''' Kurze Seiten mit nur wenigen Abschnitten oder Seiten, die keine klar strukturierten Inhaltsbereiche aufweisen.
+'''Nicht geeignet für:''' Kurze Seiten mit nur wenigen Abschnitten oder Seiten, die keine klar strukturierten Inhaltsbereiche aufweisen.</bootstrap_panel>
-==== Wie wird die Sticky Navigation erstellt? ====
+<bootstrap_panel heading="==== Wie wird die Sticky Navigation erstellt? ====">
 Die Sticky-Navigation wird '''automatisch generiert''', sobald bestimmte Voraussetzungen erfüllt sind:
@@ Zeile 52: / Zeile 86: @@
 * Der '''Text der H2-Überschrift''' wird standardmäßig als Menüpunkt verwendet.
-Die Sticky-Navigation wird '''nicht angezeigt''', wenn weniger als zwei H2-Überschriften vorhanden sind.
+<span style='font-size:30px;'>⚠</span>Die Sticky-Navigation wird '''nicht angezeigt''', wenn weniger als zwei H2-Überschriften vorhanden sind.</bootstrap_panel>
-==== Einstellungsmöglichkeiten für Inhaltselemente  ====
+<bootstrap_panel heading="==== Einstellungsmöglichkeiten für Inhaltselemente  ====">
 Sie können die Darstellung der Sticky-Navigation '''individuell anpassen''' – allerdings nur, wenn das jeweilige Inhaltselement diese Option unterstützt.
 '''So finden Sie die Einstellungen:'''
@@ Zeile 64: / Zeile 98: @@
 [[Datei:Einstellungsmöglichkeiten für Sticky Navigation in Inhaltselementen .png|links|mini|''Einstellungsmöglichkeiten für Sticky Navigation in Inhaltselementen'' ]]
+# '''Überschrift in der Navigation deaktivieren ''' Wenn dieser Haken gesetzt ist, wird das Element nicht in der Sticky-Navigation sichtbar. Nutzen Sie dies z. B. für Überschriften, die nur zur visuellen Gliederung dienen, aber keinen eigenständigen Inhaltsteil repräsentieren.
+# '''Alternativen Navigationstitel festlegen''' Statt der H2-Überschrift kannst du einen eigenen, kürzeren oder präziseren Titel für die Navigation eingeben.   Ideal für:
+#* Langwierige Überschriften (z. B. „Unsere zukunftsorientierten Forschungsprojekte im Bereich Künstliche Intelligenz“ → „Forschung & KI“).
+#* Konsistente Formulierungen (z. B. „Kontakt“ statt „Kontaktformular“).
@@ Zeile 75: / Zeile 113: @@
+{{ambox
+|type=notice
+|text=Tipp: Verwende klare, kurze und eindeutige Titel – sie sollen auf einen Blick verständlich sein.
+}} </bootstrap_panel>
-# '''Überschrift in der Navigation deaktivieren ''' Wenn dieser Haken gesetzt ist, wird das Element nicht in der Sticky-Navigation sichtbar. Nutzen Sie dies z. B. für Überschriften, die nur zur visuellen Gliederung dienen, aber keinen eigenständigen Inhaltsteil repräsentieren.
+<bootstrap_panel heading="==== Empfehlungen für eine gute Sticky-Navigation  ====">
-# '''Alternativen Navigationstitel festlegen''' Statt der H2-Überschrift kannst du einen eigenen, kürzeren oder präziseren Titel für die Navigation eingeben.   Ideal für:
-#* Langwierige Überschriften (z. B. „Unsere zukunftsorientierten Forschungsprojekte im Bereich Künstliche Intelligenz“ → „Forschung & KI“).
-#* Konsistente Formulierungen (z. B. „Kontakt“ statt „Kontaktformular“).
-Tipp: Verwende klare, kurze und eindeutige Titel – sie sollen auf einen Blick verständlich sein.
-==== Empfehlungen für eine gute Sticky-Navigation  ====
 Die Sticky-Navigation ist kein Ersatz für eine klare Seitenstruktur. Sie funktioniert nur, wenn die Inhalte bereits gut gegliedert sind. Achten Sie daher auf eine sinnvolle Gliederung mit H2-Überschriften – erst dann wird die Navigation sinnvoll.
 {| class="wikitable"
@@ Zeile 120: / Zeile 155: @@
 ❌ „Zusammenarbeit mit internationalen Partnern im Rahmen von EU-Förderprojekten“
-✅ „Internationale Kooperationen“
+✅ „Internationale Kooperationen“ </bootstrap_panel>
+<bootstrap_panel heading="==== Wie kann ich die Sticky Navigation komplett ausblenden? ====">
+Die Sticky-Navigation kann über die Seiteneigenschaften einer Seite komplett ausgeblendet werden.
+# Öffnen Sie die Seiteneigenschaften einer Seite.
+# Klicken Sie auf den Reiter "Erscheinungsbild".
+# Aktivieren Sie den Toggle "Sticky Nav ausblenden"
+# Speichern Sie. </bootstrap_panel>
+</bootstrap_accordion>
-==== Siehe auch:  ====
+==== Siehe auch  ====
 * [[TYPO3 - Navigation|Navigation]]
 * [[TYPO3 - Burger Menue|Burger Menü]]