Unit Content - On This Page
The Unit Content – On This Page Navigation component displays up to eight links that anchor to content lower on the page. Designed to be placed at the top of page directly below the intro text, the button labels should match and anchor to the headers of the corresponding sections.
Examples
On This Page
Settings & Features
- Display up to 8 links that anchor specific content that’s lower on the page.
- Character limit of 50 (including spaces) for each link label.
- Anchor IDs should:
- Use lowercase letters only
- Use hyphens between words
- Contain no spaces, underscores or special characters including #
- Be unique on the page
Working with Content
Good for:
- Helping site user jump to relevant page content
- Making long scrolling pages easier to navigate for site users
- Breaking up content into sections
Avoid if:
- Page content is very short or concise
- Link labels can’t match the sections they anchor to
Best Practices
- Use short, concise link labels to maximize readability.
- Match link label content to the heading it’s anchored to.
Usability & Guidelines
- Only use one On This Page Navigation component per page.
- Place at the top of the page content region (below the introduction) to serve as a
guide for site users as to what’s on the page.