In-page navigation is especially useful when there are numerous sections of content that don’t have a clear linear progression.
- Use on content-heavy pages that require a significant amount of scrolling to access the various sections.
- Be concise on the navigation labels, ideally one or two words rather than a phrase.
- Don’t use on pages which don't scroll.
- Don’t use to link to a new page, use the link navigation component instead.
- Don’t use to link to hidden content. Consider using the pivot component instead.
- Default: The in-page navigation control is not sticky and scrolls vertically off the page.
- Sticky: Set
<nav>in order to dock the in-page navigation below the header and collapse it into a menu at smaller viewport widths.
- Schema definition: The in-page-navigation schema defines the acceptable configurations, requirements, and options for each component.