SkipLink
A shortcut past the chrome. Hidden until focused, then it takes keyboard users straight to the content.
Example
Skip to content
Focus the link above (Tab from the address bar on a page using it), then Enter.
<SkipLink target="#demo-main" />
<main id="demo-main" tabindex="-1">...</main>Props
| Prop | Type | Default | Description |
|---|---|---|---|
target | string | #main | Id of the main content. |
label | string | Skip to content | Link text. |
Accessibility
- First focusable element on the page; your layout should render it right after
<body>. - The target needs
tabindex="-1"so focus can land on it.