The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages. It gives the user an overview of the page contents and 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 scan of the page quickly contents and may potentially reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.
Do's
- aim for short, distinct headings (H2) in order to improve readability
- make sure to order content logically so there is a natural progression when looking at the headings (H2) alone
Don'ts
- don't use longlabels that break on the 2nd line (30 characters) unless necessary
When to use
- when you have more than one H2 on a page
When not to use
- don't use on a page without much content or a single H2
- don't use it to navigate beyond the page in question