In-page Navigation component
create a sticky page navigation
- deep link to defined sections
- add display on section links
The In-page Navigation creates a sticky navigation that is made of all Section With Headlines and follows the scrolling down the page behaviour of a visitor in order to provide a quick and easy navigation within a page.
Before setting up the In-page Navigation, the page has to be divided into sections by adding Section With Headline components.
Introduction
The In-page Navigation component serves as a container for the sections that are created with the Section With Headline component. It automatically reads all set section titles that are set up in the Section With Headline components that lie within (as sub-components) the In-page Navigation. It arranges the titles on the left side in the order they are set up.
If the amount of section titles exceed the available space, a small arrow is rendered indicating the further titles.
The In-page Navigation is sticky, meaning that it sticks to the top of the page when scrolling down the page.
Besides the section titles, it is also possible to set up special featured links that are displayed on the right side of the navigation. The go to section link can be used to highlight a special section on the page and is always displayed. The display on section link only appears when scrolling over a defined section.
Glossary:
Example
Simply scroll down the page and find the sticky In-page Navigation appearing.
Structure
The sections used in the In-page Navigation must be set up within (as a sub-component) of the In-page Navigation. Every Section With Headline then must be added after one another. Within the Section With Headline, the desired content can be created with any available component.
All available section titles from the Section With Headline components within the In-page Navigation are then automatically added as the actual In-page Navigation.
Attention:
Make sure that all Section With Headline components are acutally placed within the In-page Navigation and that no Section With Headline is placed within another one.
CMS settings
tab: General
tab: Buttons
Up to 3 links can be defined that are displayed on the right side of the In-page Navigation.
Front-end rendering
The In-page Navigation is usually placed directly underneath the main navigation or the Hero component.
When scrolling down the page, the In-page Navigation always sticks to the top of the visible screen.
The go to section link is always visible on the right edge of the navigation.
The display on section link only appears when scrolling over the defined section.
If the amount of section titles exceed the available space, a small arrow is rendered indicating the further titles.
