/// Utilities
SkipNav
A keyboard-only "skip to content" link — hidden until focused, then jumps past the header to the main content.
import { SkipNav } from "@protocore/pds";Skip to content
Render SkipNav as the very first focusable element on the page and give your main region a matching id. It stays off-screen until a keyboard user tabs into it, then surfaces as a real control; activating it moves focus past the header.
Tab into this panel — the skip link surfaces at the top-inline corner before any other control receives focus.
Main content begins here.
Why it matters
A skip link is the smallest, highest-leverage accessibility affordance a site can ship: it lets keyboard and screen-reader users bypass a repeated header and navigation on every page instead of tabbing through it each time. It is invisible to mouse users and adds nothing to the visual design, so there's no reason not to include it.
Place it first in the DOM (before the header), point contentId at your <main> (or the first content region), and make that target focusable with tabIndex={-1} so the jump actually moves focus, not just the scroll position.
Usage
Do
- Render it as the first focusable element on the page.
- Give the target an `id` matching `contentId` and `tabIndex={-1}`.
- Keep the label short and literal ("Skip to content").
- Include one per page, inside the AppShell or layout root.
Don't
- Hide it with `display: none`; that drops it from the tab order.
- Point it at a non-focusable element; focus won't move there.
- Bury it after the nav; it must come first to do its job.
Accessibility
| Keys | Action |
|---|---|
| Tab | Reveals the link when it receives focus |
| Enter | Jumps focus to the main-content target |
- Hidden via an off-screen transform (not `display: none`), so it stays in the tab order and is reachable by keyboard.
- The target should carry `tabIndex={-1}` so activating the link moves keyboard focus, not just the viewport.
SkipNav props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Skip to content | Link label. |
className | string | — | |
contentId | string | main-content | `id` of the main-content target to jump to (without the `#`). |
style | CSSProperties | — |