Components Navigation
SkipLink
StableLets keyboard users jump past navigation to the main content.
Place SkipLink as the first element in <body>. It stays hidden until it receives focus, then appears at the top-left corner. Activating it moves focus to the target, #main by default, so the next Tab continues inside the content.
Overview
import { SkipLink, Text } from '@bindshq/stance-react';
export function Basic() {
return (
<div
style={{ position: 'relative', transform: 'translateZ(0)', width: '100%', minHeight: 100 }}
>
<SkipLink target="docs-skip-demo" />
<Text size="sm" tone="muted">
Navigation would be here.
</Text>
<div id="docs-skip-demo">
<Text size="sm">Main content</Text>
</div>
</div>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Import
import { SkipLink } from '@bindshq/stance-react';Examples
Skip to templates
Templates list
import { SkipLink, Text } from '@bindshq/stance-react';
export function CustomTarget() {
return (
<div
style={{ position: 'relative', transform: 'translateZ(0)', width: '100%', minHeight: 100 }}
>
<SkipLink target="#docs-skip-templates">Skip to templates</SkipLink>
<div id="docs-skip-templates">
<Text size="sm">Templates list</Text>
</div>
</div>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
target | string | 'main' | Id of the element to jump to, with or without #. |
children | ReactNode | 'Skip to main content' | Link text. |
Accessibility
- Satisfies WCAG 2.4.1 Bypass Blocks.
- Moves focus, not just scroll position, by giving the target tabindex="-1" when needed.
- Becomes visible on focus with the standard focus ring.
Keyboard
| Keys | Action |
|---|---|
| Tab | From the top of the page, reveals the link. |
| Enter | Moves focus to the main content. |
Usage guidelines
Do
- Render it first in the document.
- Give the target a stable id.
Don’t
- Hide it with display: none; it must stay focusable.