SkipNav
Skip link that jumps keyboard users past the navigation to the main content
Category: navigation · WCAG 2.2-AA · accessibility, skip-link, keyboard, navigation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
targetId | string | cascade-skip-target | SkipNavLink: id of the SkipNavTarget to jump to |
labels | { label?: string } | — | SkipNavLink: overrides the built-in i18n label per instance |
id | string | cascade-skip-target | SkipNavTarget: anchor id — must match the link targetId |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-text--cascivo-radius-control--cascivo-focus-ring
When to use
- Letting keyboard users jump past repeated navigation to the main content
- Meeting WCAG bypass-blocks by providing a skip link as the first focusable element
- Targeting a custom main-content anchor (targetId / matching SkipNavTarget id)
When not to use
- General in-page navigation — use anchor links or a table of contents
- Visible persistent navigation — this link is hidden until focused
How to build an accessible SkipNav in React →
Examples
Default pair
SkipNavLink must be the first focusable element on the page
<><SkipNavLink /><nav>…</nav><SkipNavTarget /><main>…</main></>Custom target
<><SkipNavLink targetId="main-content" /><SkipNavTarget id="main-content" /></>Related components
- ShellHeader — ShellHeader has a built-in skip-to-content link for console shells