Page contents Page contents The in-page navigation is a vertical menu containing (anchored) links to H2 headings for long content pages. In-page navigation helps users understand what content is included on a long page, and allows them to jump directly to a section. The in-page navigation component is optional. How to build this in the publishing platform (EWPP) It can be used on pages with multiple sections, where users might not need to read the page content in its entirety and could benefit from being able to jump directly to a section further down the page. Get the code and specifications In-page navigation gives the user an overview of the page contents. It has a fixed position (does not move while scrolling) at either the left side of a page on desktop, or top-bar on mobile. This component helps users quickly scan the page contents and may reduce vertical scrolling, allowing users to easily jump straight to the segment of the page that meets their need. Try it out in the playground When to use when you want to list page section headers, in order to help users navigate through content When not to use don't use this component on shorter pages, or pages with just one or two sections (a section is content under an H2 heading, in this context) don't use these links to navigate to another page Dos use H2 section headings that are short and distinct, for ease of reading make sure to order content logically so there is a natural progression when looking at the headings (H2) alone Don'ts don't use long labels that break on the 2nd line (max. 30 characters). Keep label translations in mind. if you use the in-page navigation, don't have more than seven section headings, as it will make the list of links too long. Break up your page into multiple pages if you have more than seven sections on a single page.
