In-page navigation
Documents in-page navigation for lengthy content pages, sticky same-page section links, smooth scrolling to target sections, generated links based on main content headings, and current-section highlighting using Intersection Observer behavior.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| In-page anchor navigation | Choose in-page anchor navigation when one page has several meaningful sections, usually at least two H2-level destinations and enough length to justify jump links. | Activating an anchor link navigates within the current page to the matching section target. | USWDS documents lengthy-page in-page navigation, same-page scrolling, sticky placement, generated links from main content, and active section highlighting. |
Comparisons supported by this source
- In-page anchor navigation vs breadcrumbs vs side navigation
USWDS defines in-page navigation as same-page section navigation for lengthy content with sticky active-section behavior.
- Process list vs step navigation vs in-page anchor navigation
USWDS In-page navigation guidance supports the distinction between same-page heading jumps and cross-page process journeys.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: U.S. Web Design System. Last checked: .