Anchor nav

What it is

“On this page” links in their own band directly under the page head, never inside it. Quiet navy links with a line-strong underline. No gold: the gold stays on the action.

When to use

• A long page with several named bands, such as an award page or a scholarship page.
• Directly under the page head or the award hero, in a band of its own. Use .hs-band--compact for that band.

When not to use

• A filter for one list: use Chips.
• A switch between sibling views with their own URLs: use Tabs.
• Routes to other pages: use a Link list.

Rules

• Mark it up as <nav class="hs-anchor-nav" aria-labelledby="…">. Inside: a visible <p class="hs-anchor-nav__label"> that carries the id, then <ul class="hs-anchor-nav__list"> with one <a class="hs-anchor-nav__link" href="#…"> per item.
• Put it in its own band directly under the page head, never inside it.
• Use no action gold and no arrow glyphs in the link text. The gold stays on the page’s one action.
• Give each target band the matching id. It needs scroll-margin-top: the header clearance plus 16px. base.css sets it on every [id].
• Write the label in sentence case (“On this page”). CSS uppercases it.
• The hs_html_page validator rejects <nav> today. Allow <nav> there before you migrate a page with an anchor nav.

Accessibility

• <nav> with aria-labelledby gives a named navigation landmark. Use a unique label id for each anchor nav on the page.
• The links are navy semibold: 12.4:1. The 1px line-strong underline turns navy on hover.
• Each link is a 40px tap target: a 24px line plus 8px above and below.
• The links are plain in-page links, so they work without JavaScript.
• prefers-reduced-motion: reduce removes the underline transition.

Variants

Anchor nav

Each target band needs scroll-margin-top.

<nav class="hs-anchor-nav" aria-labelledby="on-this-page">
  <p class="hs-anchor-nav__label" id="on-this-page">On this page</p>
  <ul class="hs-anchor-nav__list">
    <li><a class="hs-anchor-nav__link" href="#requirements">Eligibility and materials</a></li>
    <li><a class="hs-anchor-nav__link" href="#process">How to apply</a></li>
    <li><a class="hs-anchor-nav__link" href="#recipients">Recipient stories</a></li>
    <li><a class="hs-anchor-nav__link" href="#related">Related scholarships</a></li>
    <li><a class="hs-anchor-nav__link" href="#faq">FAQs</a></li>
    <li><a class="hs-anchor-nav__link" href="#resources">Articles and videos</a></li>
  </ul>
</nav>