Skip Link

The first tab stop: jump past the navigation to the content. Invisible until focused, which is the whole design.

src/components/ui/skip-link.tsx

About

From the component's own source, where it was written.

The first tab stop: jump straight to the main content.

Visible only while focused, which is the whole design — it is there for someone tabbing through, and invisible to everyone else.

sr-only plus focus:not-sr-only rather than moving it off-screen with a transform: an element positioned off-screen and animated back in is a position change, and this kit does not move things. Appearing on focus is a state change, not motion.

The target needs tabindex="-1", or clicking the link scrolls the page but leaves focus on the link and the next Tab starts from the top again.

Install

npx astralyx-ui add skip-link

Usage

import { SkipLink } from '@/components/ui/skip-link'

<SkipLink href="#main" />
…
<main id="main" tabIndex={-1}>…</main>

Composer

Change the props and the source below follows.

Skip to content

Tab into the frame — the link appears on focus.

Props
tsx
<SkipLink href="#main" />

Examples

Focus to reveal

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.