# Anchor nav

> “On this page” links to the bands below, in their own band directly under the page head.

- Block class: `.hs-anchor-nav`
- CSS: `components/anchor-nav.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2a.html
- Variants: Anchor nav
- HTML page: https://brand.honorsociety.org/components/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](/components/chips/).
- A switch between sibling views with their own URLs: use [Tabs](/components/tabs/).
- Routes to other pages: use a [Link list](/components/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`.

```html
<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>
```