--- title: Automatische Inpage Navigation – Tutorial für die toujou-Website url: "https://www.toujou.de/service/elementbibliothek/navigation-elements/automatische-inpage-navigation/" description: Funktionsweise, How-to-Anleitung und Hinweise zum korrekten Umgang und Verhalten der Inpage Navigation in toujou für TYPO3-Websites. date: 2021-05-14 modified: 2022-09-27 --- # Automatische Inpage Navigation – Tutorial für die toujou-Website 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Navigation Elements](https://www.toujou.de/service/elementbibliothek/navigation-elements/) 5. [• Automatische Inpage Navigation](https://www.toujou.de/service/elementbibliothek/navigation-elements/automatische-inpage-navigation/) Automatische Inpage Navigation ============================== Mit dem Element Automatische Inpage Navigation können Sie auf jeder Seite Ihrer Website an einer beliebigen Stelle ein Inhaltsverzeichnis darstellen. Das Element generiert dabei automatisch die Links zu den Seitenbereichen, die per [Chapter](https://www.toujou.de/service/elementbibliothek/widgets/chapter/) strukturiert sind. In diesem Tutorial erläutern wir Ihnen, wie Sie vorgehen und welche individuelle Gestaltungsmöglichkeiten Sie dabei haben. [Beispielansicht](#c1009841) [Anleitung](#c1009839) [Verhalten](#c1009834) --- Beispielansicht --------------- [ ![](https://www.toujou.de/_assets/processed/yNzTj5TVkj06J2V2PzEhxVq7YfBZBp-TnuOO_RhGHT8/q:85/c:1300:731.24999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0lucGFnZV9OYXZpZ2F0aW9uX193aWRlc2NyZWVuX2UzZGJmZjlhNGQ:t/cb:dca4263c4900a37b63bc8707058804aeaedc807e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvSW5wYWdlX05hdmlnYXRpb25fX3dpZGVzY3JlZW4ucG5n) Ansicht für Endgeräte mit mehr als 1440 px Breite. ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/Inpage_Navigation__widescreen.png) #### **Widescreen** [ ![](https://www.toujou.de/_assets/processed/LK3FEuPcXAJZs-FRP-P0pvjF2pewoUzId6CGgT9uJPE/q:85/c:950:534.37499999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0lucGFnZV9OYXZpZ2F0aW9uX19kZXNrdG9wXzAxX2YxZGJkZTk0YWI:t/cb:9eafa54ff9038ae380b736d268eea4a9c0760011/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvSW5wYWdlX05hdmlnYXRpb25fX2Rlc2t0b3BfMDEucG5n) Ansicht für Endgeräte mit mehr als 1024 px Breite. ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/Inpage_Navigation__desktop_01.png) #### **Desktop** [ ![](https://www.toujou.de/_assets/processed/u5VkVtVCyTIzKSsoxh390Ouckxdd708XkPN7DmjjMoY/q:85/c:1200:674.99999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0lucGFnZV9OYXZpZ2F0aW9uX190YWJsZXRfZWM2MTAxOWEzZQ:t/cb:823a9b1ffb6df24897410a21f1927c83b1d13db6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvSW5wYWdlX05hdmlnYXRpb25fX3RhYmxldC5wbmc) Ansicht für Endgeräte mit mehr als 600 px Breite. ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/Inpage_Navigation__tablet.png) #### **Tablet** [ ![](https://www.toujou.de/_assets/processed/jG04RUCT3rY5jyJNiXdQEh2P6E9bAa7taDBp32yG8l8/q:85/c:1200:674.99999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0lucGFnZV9OYXZpZ2F0aW9uX19tb2JpbGVfMWUwOWI0MTc5Ng:t/cb:cb46dd853a492bb5bed1776b292f6a9606ff3bc7/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvSW5wYWdlX05hdmlnYXRpb25fX21vYmlsZS5wbmc) Ansicht exemplarisch mit 375 px Breite. ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/Inpage_Navigation__mobile.png) #### **Mobile** --- Anleitung --------- [ ![](https://www.toujou.de/_assets/processed/PzN7DUSYeIOjmM7JKp_OJGlrjAIxLbP9TIZsHDy2uvQ/q:85/c:1908:859.15132705478:fp:0.5:0.5/rt:force/w:432/h:195/fn:Y3NtX0F1dG9tYXRpc2NoZV9pbnBhZ2VfbmF2aV9lbGVtZW50X2F1c3dhZWhsZW5fZjdhODQ3MjE1MQ:t/cb:4813984cb197e2bdce08fa63e2c30b0c8f77a39b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvQXV0b21hdGlzY2hlX2lucGFnZV9uYXZpX2VsZW1lbnRfYXVzd2FlaGxlbi5qcGc) ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/Automatische_inpage_navi_element_auswaehlen.jpg) ### Element anlegen - Nach dem Klick auf +Inhalt wählen Sie unter dem Reiter *Navigation Elements* die **Auto Inpage Navigation** aus. [ ![](https://www.toujou.de/_assets/processed/pL0bF74d2idnKRzbeNLhVsRbbr2B5EBm5GLSwalNkEc/q:85/c:1694.304:954:fp:0.555:0.5/rt:force/w:432/h:243/fn:Y3NtX2lucGFnZS1uYXZpLWR0LTJfMTczM2Y1YmNmYQ:t/cb:0133387e09ad17866d9be05021e4f2d0bccc178f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvaW5wYWdlLW5hdmktZHQtMi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/inpage-navi-dt-2.png) ### Einstellungen vornehmen - Im Bereich *Art des Scrollens* können Sie zwischen einer scrollenden oder sticky Navigation, also einer festen oder mitlaufenden wählen. - Unter *Elementbreite* stellen Sie ein, ob sich das Element im Frontend an der Content- oder an der Seitenlaufweite orientiert. - In der *Ausrichtung* entscheiden Sie zwischen einer linksbündigen oder zentrierten Inpage Navigation. - Unter *Element Design* bestimmen Sie die Hintergrundfarbe analog zu den definierten Farben primary, secondary und inverted. Default steht für den Standard-Hintergrund. - **Speichern** Sie Ihre Einstellungen. --- Verhalten --------- **Die automatische Inpage Navigation referriert auf die [Chapter](https://www.toujou.de/service/elementbibliothek/widgets/chapter/). Daher müssen Sie auf der Seite, auf der Sie die automatische Inpage Navigation nutzen möchten zuvor Chapter erstellen. Ist in einem Chapter in den Settings im Feld *Name of the element* keine Elementbezeichnung hinterlegt, wird automatisch ein Standard-Text mit »no title« in der Inpage Navigation ausgespielt. Die Reihenfolge der Links ergibt sich automatisch aus der Reihenfolge der Elemente, wie Sie sie im Backend der Seite angelegt haben.** **Besonderheit**: Im Backend versteckte Chapter (deaktiviert) werden erst im Frontend berücksichtigt, wenn sie freigeschalten wurden. Achten Sie für eine reibungslose Funktionalität der Inpage Navigation darauf, dass einzelne Chapter mit Content in ausreichender Länge befüllt sind. **Responsive**: Beachten Sie in der mobilen Ansicht, dass aufgrund des mangelnden Platzes die Inpage Navigation als Dropdown-Menü ausgespielt und damit nicht alle Verlinkungen des Inhaltsverzeichnisses gleichzeitig angezeigt werden. Mit einem Klick auf den Pfeil öffnet sich das Dropdown-Menü. --- Verknüpfte Themen ----------------- [Tutorials](https://www.toujou.de/tutorials/), die mit diesem Element in Verbindung stehen. [Chapter](https://www.toujou.de/service/elementbibliothek/widgets/chapter/)