--- title: Auto Inpage Navigation url: "https://www.toujou.com/service/element-library/navigation-elements/auto-inpage-navigation/" date: 2021-05-14 modified: 2022-09-27 --- # Auto Inpage Navigation 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Navigation Elements](https://www.toujou.de/service/element-library/navigation-elements/) 5. [Auto Inpage Navigation](https://www.toujou.de/service/element-library/navigation-elements/auto-inpage-navigation/) Auto Inpage Navigation ====================== The automatic inpage navigation element allows you to display a table of content anywhere on any page of your website. The element automatically generates the links for the respective page areas that are structured by [chapter](https://www.toujou.de/service/element-library/widgets/chapter/#c1009858). In this tutorial we will explain how to proceed and which individual design options you have. [Sample view](#c1009845) [Step by step guide](#c1009843) [Screen adaption](#c1009833) --- Sample view ----------- [ ![](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) View for devices with more than 1440 px width. ](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) View for devices with more than 1024 px width. ](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) View for devices with more than 600 px width. ](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) View for devices with 375 px width. ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/Inpage_Navigation__mobile.png) #### **Mobile** --- Manual ------ [ ![](https://www.toujou.de/_assets/processed/qfm0b2IY855ZrEzDrR8-xFmymZLnEtB1b32hfkKW9wM/q:85/c:1694.304:954:fp:0.555:0.5/rt:force/w:432/h:243/fn:Y3NtX0F1dG9tYXRpc2NoZV9pbnBhZ2VfbmF2aV9lbGVtZW50X2FubGVnZW5fZW5fYmE2MDMxZTdlZA:t/cb:2782c30a055e8ab780331373aec705c553e873c5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvQXV0b21hdGlzY2hlX2lucGFnZV9uYXZpX2VsZW1lbnRfYW5sZWdlbl9lbi5qcGc) ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/Automatische_inpage_navi_element_anlegen_en.jpg) ### Create an element - After clicking +Content, select **Auto Inpage Navigation** located in the *Navigation Elements* tab. [ ![](https://www.toujou.de/_assets/processed/H5-Etc1mW2Loep0E5icqCuwHTuLBWXbp3GBTPoYG8tA/q:85/c:1692.396:952.092:fp:0.5555:0.499/rt:force/w:432/h:243/fn:Y3NtX0lucGFnZV9uYXZpZ2F0aW9uX2F1dG9tYXRpc2NoXzJlYmFlMWQ0ZDQ:t/cb:9722a9ab30b565b93594dcebe2557351ba26fe39/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzEwX25hdmlnYXRpb25fZWxlbWVudHMvSW5wYWdlX25hdmlnYXRpb25fYXV0b21hdGlzY2gucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/10_navigation_elements/Inpage_navigation_automatisch.png) ### Adjusting settings - With *Scroll Type* you can choose between either a fixed or a scrolling navigation. - With the *Element Width* you can choose the orientation of the inpage navigation to either the content width or to the page width. - In *Alignment* you can choose between either a left-aligned or a centered inpage navigation. - With *Element Design* you can determine the background color that corresponds to your chosen colors primary, secondary and inverted options. Default in this scenario refers to a transparent background. --- Screen adaption --------------- **The automatic inpage navigation refers to the chapters. Therefore, you must first create chapters in the Backend where you want to use the Automatic Inpage Navigation. If no element name is created in the field 'name of the element' in the chapter settings, a standard text with 'no title' is automatically displayed in the inpage navigation. Also please be aware that the order of the links is automatically determined by the order of the elements as you have created them in the Backend.** **Worth noting**: Chapters hidden in the back end ('disabled') are only displayed in the Frontend once they have been enabled. **Responsive**: Please note that in the mobile view, to fit the size of the screen better,, the Inpage Navigation is displayed with a dropdown menu. This does mean that all the links of the table of contents are not displayed at the same time. Click on the arrow to open the dropdown menu. --- [ ![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) ### All navigation elements ](https://www.toujou.de/service/element-library/navigation-elements/#c1009574) [ ![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) ### All elements at a glance ](https://www.toujou.de/service/element-library/#c1004331) [ ![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) ### All tutorials at a glance ](https://www.toujou.de/service/tutorials/#c1004326)