SkipLink
Default
Section titled “Default”Renders a link pointing to #main-content with the label “Skip to main content”. Normally hidden — only visible on keyboard focus. Forced visible here for demonstration.
import { SkipLink } from '@eekodigital/raster';
<SkipLink />Visually hidden until focused. In production, the SkipLink is positioned off-screen and only becomes visible when a keyboard user tabs to it — the very first focusable element on the page.
Custom href
Section titled “Custom href”Override the default target anchor when your main landmark uses a different id.
<SkipLink href="#content" />Custom label
Section titled “Custom label”Pass children to replace the default link text.
<SkipLink>Skip to content</SkipLink>Placement guidance
Section titled “Placement guidance”Always render SkipLink as the first child of <body> (or the first element inside your app root) so it is the first tab stop on every page.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | '#main-content' | The anchor target to jump to when activated. |
children | ReactNode | 'Skip to main content' | Link label text. |
...props | AnchorHTMLAttributes | — | All native anchor attributes. |