Skip Link — cinder playground

Overview

A visually hidden skip-to-content link that becomes visible on keyboard focus and moves focus (and the viewport) to a landmark element, letting keyboard and screen-reader users bypass repeated navigation (WCAG 2.4.1 Bypass Blocks).

Usage

Place it as the first focusable element in your layout and point target at the id of your main content region.

<script lang="ts">
  import SkipLink from '@lostgradient/cinder/skip-link';
</script>

<SkipLink target="main-content">Skip to main content</SkipLink>

<!-- … site navigation … -->

<main id="main-content">
  <!-- … -->
</main>

The default label is "Skip to main content"; pass children to override it. SkipLink handles prefers-reduced-motion and the tabindex save/restore dance internally, so the target is never left permanently focusable.

Live preview

When to use

Use when

Providing a keyboard shortcut to jump past site-wide navigation directly to the main content area.
Meeting WCAG 2.4.1 (Bypass Blocks) without adding visible chrome to the layout.

Avoid when

The page has no repeated navigation block — a skip link adds no value on single-panel layouts.
The target region already receives focus naturally without intervention.

Examples

Basic usage

Tab into this example to reveal the skip link, then press Enter to jump focus to the main content area.

Props

Props for skip-link
Name	Type	Default	Required	Bindable	Description
`target`	`text`		req		The `id` of the element to receive focus and scroll into view when the skip link is activated. Required. The rendered `href` is `#${target}`.
`children`	`snippet`				Optional override for the visible label. Defaults to "Skip to main content".