Navigation
Skip Link
A "skip to content" link revealed on keyboard focus.
An accessibility "skip to content" link that is visually hidden until it receives keyboard focus, letting keyboard and screen-reader users jump past repeated navigation. CSS-only.
Skip link
Tab into the frame to reveal the link, which is hidden until focused.
Skip to content
The link sits before your nav and points at the main landmark. It only appears on focus in real use.
Props
The framework bindings expose these props (and forward the rest to the root element).
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | '#main-content' | Target landmark id. |
CSS variables
Override these on any ancestor to theme the component. See the theme studio to preview changes live.
| CSS variable | Used for |
|---|---|
--hl-primary | Link background when focused. |
--hl-radius-md | Corner radius. |
Accessibility
- Place it as the first focusable element in the document.
- It stays in the DOM (not
display:none) so focus can reach it; only its position is offscreen until focused.