Anchor navigation

Anchor navigation gives people a short list of jump links to sections on the same page. It works well on long pages where readers may only need one section (for example overview, fees, contacts, or deadlines). You choose horizontal placement (often a slim bar) or vertical placement (often a sidebar), plus an optional title and visual treatment so the block fits the page.

Authors name each link and point it at the correct in-page target. Those targets must exist in the content (for example headings or landmarks with matching ids). If no links are configured, the block does not appear for visitors; authors still see a placeholder in edit mode.

Selecting a link scrolls the page to the matching section. The pattern is for in-page movement only, not for opening other sites or full new pages.

Horizontal layouts suit space under a hero or above the main column. Vertical layouts suit a sidebar next to long reading content. Match density and contrast to the background so links stay easy to see and tap.

1. Navigation region wrapping the whole component.
2. Optional title (for example “On this page”) when vertical layout and title are used.
3. List of links, each pointing to a fragment on the page.

• Write short, specific link labels that match the section headings they jump to.
• Keep the number of links modest so the list scans quickly; very long pages may need fewer, higher-level anchors rather than every subsection.
• Add a clear accessible name when link text alone could be vague (for example several links that all say “Read more”). Coordinate with content so ids and labels stay in sync when sections move or rename.
• Use fragment targets only. This component is not for external URLs or full page paths.

• Long pages with clear sections and stable in-page targets.
• A sidebar “table of contents” or a horizontal strip of jumps under the hero or intro.

• Multi-step or multi-page journeys; use step or task navigation suited to flows across pages.
• Site or section navigation; use primary, secondary, or other nav patterns meant for moving between pages.
• When everything fits above the fold with no real need to jump.

Do

• Confirm each jump target exists on the page before publish.
• Order links in a logical reading order (often top-to-bottom on the page).
• Test on mobile so the anchor strip or sidebar does not crowd the main content.

Don't

• Point links at missing ids or sections that were removed.
• Use anchor navigation as a substitute for primary page navigation or breadcrumbs.