--- title: Inpage Navigation – Tutorial zur richtigen Anwendung in toujou url: "https://www.toujou.de/service/elementbibliothek/navigation-elements/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-03-24 modified: 2022-09-27 --- # Inpage Navigation – Tutorial zur richtigen Anwendung in toujou 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. [• Inpage Navigation](https://www.toujou.de/service/elementbibliothek/navigation-elements/inpage-navigation/) Inpage Navigation ================= Mit dem Element Inpage Navigation können Sie auf jeder Seite Ihrer Website an einer beliebigen Stelle ein Inhaltsverzeichnis darstellen. Das Element ermöglicht, mehrere Links der Seite zu setzen und bietet daher eine gute Alternative zu den [Anker-Links](https://www.toujou.de/tutorials/seiteninhalte/textbearbeitung/ankerlinks-setzen/). In diesem Tutorial erläutern wir Ihnen, wie Sie vorgehen und welche Gestaltungsmöglichkeiten Sie dabei haben. Auf dieser Seite 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/sscfoLG4Tu8HSixEqNrU7xrzWj0u1wroFmR-OfRj3dQ/q:85/c:1694.304:954:fp:0.444:0.5/rt:force/w:432/h:243/fn:Y3NtX2lucGFnZV9uYXZpZ2F0aW9uX0VsZW1lbnRfYW5sZWdlbl83NTIwODg3OGEw:t/cb:d09cf142d38a72dbbc5e7e50fc6d19828f375ae7/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvaW5wYWdlX25hdmlnYXRpb25fRWxlbWVudF9hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/inpage_navigation_Element_anlegen.png) ### Element anlegen - Nach dem Klick auf +Inhalt wählen Sie unter dem Reiter *Navigation Elements* die *Inpage Navigatio*n aus. [ ![](https://www.toujou.de/_assets/processed/bOyXqggXnUKoPeiVG1acnyFXyuJRtfQc13EzqldeIVI/q:85/c:1692.396:952.092:fp:0.5555:0.499/rt:force/w:432/h:243/fn:Y3NtX2lucGFnZV9uYXZpZ2F0aW9uX2VsZW1lbnRlX3dhZWhsZW5fYWVhNDVmYjM0NA:t/cb:4d4d1b1fff2c5455625b2842ff7872106f59114b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvaW5wYWdlX25hdmlnYXRpb25fZWxlbWVudGVfd2FlaGxlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/inpage_navigation_elemente_waehlen.png) ### Chapterelemente wählen - Im Reiter *Content* können Sie unter *Label* dem Element einen Namen geben, beispielsweise »Inhaltsverzeichnis« oder »Auf dieser Seite«. - Unter *Anker-Elemente* wählen Sie aus den verfügbaren Objekten die zu gewünschten zu verlinkenden Chapter-Elemente. Beachten Sie, dass die Chapter-Elemente mit den [Namen auftauchen, den Sie Ihnen gegeben haben](#c1009566). Ohne Namen erscheinen die ersten Worte eines Elements. - Hinweis: Nur Elemente aus dem Inhaltsbereich einer Seite sind wählbar. [ ![](https://www.toujou.de/_assets/processed/MKvRrIMmMYNgpvb0qG26fsxjlkXXLO_MnS8mil3ZyoU/q:85/c:1692.396:952.092:fp:0.5555:0.501/rt:force/w:432/h:243/fn:Y3NtX2lucGFnZV9uYXZpZ2F0aW9uX2N0YV9idXR0b25fNWEyOTJjOTVjZg:t/cb:6f2c356cfbf931693f9939c7e43a0a1f2e2f79cf/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvaW5wYWdlX25hdmlnYXRpb25fY3RhX2J1dHRvbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/inpage_navigation_cta_button.png) ### CTA Button anlegen - Im Feld *CTA-Text* geben Sie ein, was im Frontend an der Stelle des Link-Buttons erscheinen soll. - Mittels Klick auf das **Kettensymbol** im Bereich *CTA-Link* können Sie den CTA-Button mit einem Link hinterlegen. [ ![](https://www.toujou.de/_assets/processed/MHVy3ERvaDypcnHMAwzKZ01ChZTUgtiGbWKuF69K8sE/q:85/c:1694.304:954:fp:0.555:0.5/rt:force/w:432/h:243/fn:Y3NtX2lucGFnZV9uYXZpZ2F0aW9uX2VpbnN0ZWxsdW5nX3Zvcm5laG1lbl8xZTUxZTg4Njc5:t/cb:1b2e6284aa209e98ff3bc45fe69cd0dbb6a8ce0b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvaW5wYWdlX25hdmlnYXRpb25fZWluc3RlbGx1bmdfdm9ybmVobWVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/inpage_navigation_einstellung_vornehmen.png) ### Einstellungen vornehmen - Mit dem *Art des Scrollens* können Sie zwischen einer scrollenden oder sticky, also festen oder mitlaufenden Navigation wählen. - Unter *Elementbreite* stellen Sie ein, ob sich das Element im Frontend an der Content- oder an der Seitenlaufweite orientiert. - Im Dropdownmenü *Ausrichtung* entscheiden Sie zwischen einer linksbündigen oder zentrierten Inpage Navigation. - Unter *Element Design* können Sie die Hintergrundfarbe analog zu den definierten Farben primary, secondary und inverted bestimmen. - **Speichern** Sie Ihre Einstellungen. --- [ ![](https://www.toujou.de/_assets/processed/0-KaMGjwwvCzTeXMl4KctaW7tEzanPIH26iuUc1i2iM/q:85/w:433/h:288/fn:Y3NtX0lucGFnZV9uYXZpZ2F0aW9uX0VsZW1lbnRuYW1lX2VpbmdlYmVuXzU4ZmFhZmY3YjY:t/cb:6382ec5accc64be3a57f8f07d62388e61c9fa5f3/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvSW5wYWdlX25hdmlnYXRpb25fRWxlbWVudG5hbWVfZWluZ2ViZW4ucG5n) ](https://www.toujou.de/_assets/processed/9PauO2F-HoZL2f4eI2aZ_RNVDHBIVgeS2Mt1oiGgO30/q:85/w:1024/h:682/fn:Y3NtX0lucGFnZV9uYXZpZ2F0aW9uX0VsZW1lbnRuYW1lX2VpbmdlYmVuXzJmN2Y5ZjI5NGE:t/cb:6382ec5accc64be3a57f8f07d62388e61c9fa5f3/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvSW5wYWdlX25hdmlnYXRpb25fRWxlbWVudG5hbWVfZWluZ2ViZW4ucG5n) ### Namen der Elemente eintragen - Damit das Inhaltsverzeichnis auch die tatsächlichen Begriffe ausspielt, ist es wichtig, dass Sie die jeweiligen Elemente benannt haben. - Um einem Element einen Namen zu geben, klicken Sie im jeweiligen Element auf den Reiter **Settings** und tragen im Feld N*ame of the element* die gewünschte Bezeichnung ein, beispielsweise Cinema Teaser 66%. - **Speichern** Sie die Änderungen. --- Verhalten --------- **Ist in einem Element in den Settings im Feld *Label* 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 Inhalte (deaktiviert) werden im Anchor Elements bei den verfügbaren Objekten ebenfalls angezeigt und können daher direkt angewählt werden. Sobald das Element freigeschalten wird, erscheint es dann auch in der Inpage Navigation. 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/) --- [ ![Ein gemütlicher Raum mit einem Schreibtisch, wo eine Person arbeitet, während eine andere sich und eine Pflanze im Hintergrund steht.](https://www.toujou.de/_assets/processed/qNNVYqD3wEtkyO9w1svk-TgmrV4Kmz3-Dy2xHQwL_nI/q:85/c:1296:800:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtXzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlX2QzODU1N2IwZTg:t/cb:5f1cd16c10c25895a1fef11cf127bb5c3546bb22/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlLnBuZw) ### Alle Navigations-Elemente ](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [ ![Eine digitale Benutzeroberfläche wird von zwei Figuren auf einer Hebebühne betrachtet, während sie an einem Projekt arbeiten.](https://www.toujou.de/_assets/processed/OAkhxiyS5WfUYWBNEV2NKLISaZymcxfUEiHSy_UrCbU/q:85/c:1296:800:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfMDBkMmIxNzAyNQ:t/cb:1305e23ee83a60de5f6c36c46c61c8feffa50315/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnkucG5n) ### Alle Elemente im Überblick ](https://www.toujou.de/service/elementbibliothek/) [ ![Zwei kleine Figuren stehen vor einem großen Bildschirm, der eine Webseite mit Informationen über TYPO3 zeigt.](https://www.toujou.de/_assets/processed/BSyZWxd3x6AVFLt_GIe9kPFgKkVtCK_y7721UljzduE/q:85/c:1296:800:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHNfNjkxZTYwOTcyZQ:t/cb:8d218074806083852dab8bb96efbe9568d7ed93c/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHMucG5n) ### Alle Tutorials im Überblick ](https://www.toujou.de/tutorials/)