In-Page Navigation
This pattern provides a way to link to content that is located further down a long page. Links are formatted as bold blue text links with animated orange chevrons. A horizontal line beneath the navigation bar provides a boundary between the navigation and the page content. WordPress offers administrators the option to make this navigation “stick” to the top of the page, which may help users better orient themselves to lengthy content. Sticky functionality is disabled on mobile.
Use Cases:
- Provide quick, clear access to sections of long, text-heavy pages.
Avoid:
- Using in-page navigation to link to content on a different page.
- Using more than four or five menu items
- Wrapping the in-page menu to a second line.
Accessiblity:
- Including an in-page navigation on long, text-heavy pages with clear sections helps users gain access to information that would otherwise be difficult to locate.
Dependencies:
- Anchor link (set an anchor link by selecting the link point within the text of the page or post and using advanced WordPress Block settings to create a link term)
Component Viewer
Preview various component colors, widths, and alignments.