Skip Link
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add navigation/skip-linkPlain-CSS theme — no build step
npx astrocraft-ui add navigation/skip-link --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add navigation/skip-link --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add navigation/skip-link --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add navigation/skip-link --theme tailwind --bridge lumosLive demo
BackToTop & SkipLink
Both are focus moves that happen to scroll, which is the half everyone drops. The button below appears once you are 400px down and sends the caret — not just the viewport — back to <main>. SkipLink is not in this box at all: it is the first element in the page's <body>, which is the only place a bypass block means anything. Reload and press Tab.
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `SkipLink.astro` | `skip-link` | — | — | — |
Source
What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.
---
// src/components/ui/navigation/skip-link/SkipLink.astro — headless primitive (see ../../README.md).
// The WCAG 2.4.1 bypass block: the first focusable thing on the page, hidden until it has focus.
// Four lines, required by every conformance level, and missing from almost every project — which is
// the entire reason it is a file here rather than a note in the docs.
//
// Render it as the FIRST element inside <body>, before any header, and point `href` at your main
// landmark's id. Two details that are easy to get wrong and are handled here:
//
// • It is hidden with `clip-path`, never `display: none` or `visibility: hidden` — either of those
// also removes it from the focus order, which is the one thing it needs to be in. structure.css
// carries that rule, scoped to `:not(:focus)`.
// • `:focus`, not `:focus-visible`. A skip link is reached by Tab and by nothing else, and
// `:focus-visible` heuristics are not something to bet a legal requirement on.
//
// Give the target `tabindex="-1"` if it is not natively focusable: browsers move the sequential
// focus start to a fragment target either way, but the explicit attribute is what makes the CARET
// land there in every engine, and it costs one attribute.
import "../../../../styles/structure.css";
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"a"> & { href?: string };
const { href = "#main", class: className, ...rest } = Astro.props;
---
<a href={href} class={className} data-slot="skip-link" {...rest}
><slot>Skip to main content</slot></a
>
import SkipLink from "./SkipLink.astro";
export { SkipLink };
export default SkipLink;
What you get
The component source, copied into your project by npx astrocraft-ui add navigation/skip-link — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.