Navigation
SkipLink
The first focusable element on the page: a link straight to the main content, visible only while focused.
Import
import { SkipLink } from "@loamui/core";Usage
Every example has a CSS tab. That’s the real, complete stylesheet for the component: plain, static CSS, with nothing running in the browser.
Basic usage
Click into the preview and press Tab: the link appears fixed at the top corner of the viewport, and following it moves focus to the target. This site's own skip link is this component, pointing at its <main>; the demo points at a section of its own so the two do not collide.
Press Tab here to reveal the skip link.
Guidance
When to use it
- On every page with repeated header content (navigation, search, branding), before the main content.
- As the very first element inside <body>, so it is the first Tab stop on the page.
When not to
- Pages with no header to skip: if the first Tab stop is already the main content, the link only adds a step.
- For general in-page navigation: use ordinary anchor links. SkipLink bypasses repeated navigation to reach the main content. Use ordinary links for tables of contents.
Accessibility
- Keyboard and screen-reader users otherwise re-traverse the whole header on every page; this is the standard escape hatch, and it must be the first Tab stop to do its job.
- Reveals on :focus (not :focus-visible), so it appears however focus arrives.
- Fixed positioning means appearing never shifts the page layout.
- The default label 'Skip to main content' names the destination; if you override it, keep the destination in the words.
How it works
The target is a landmark
Point href at the id of the <main> element and give the target tabIndex={-1}: an id alone scrolls, but only a focusable target reliably moves keyboard focus past the header in every browser. <main> keeps the destination meaningful to assistive technology, and the elements layer gives every [id] scroll-margin so the target never hides under sticky chrome.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | The id of the main content landmark, e.g. "#content". |
children | ReactNode | "Skip to main content" | The link label. |
...others | AnchorHTMLAttributes<HTMLAnchorElement> | — | All native <a> props are forwarded. |