Skip link

The first tab stop of a page: a link that skips the navigation and lands on the content — hidden until it is focused.

WebStableNavigation

Web only — React, from @krizaka/ui/skip-link. Stable: its API only changes in a major version.

Why it is here. Every app shell that keeps its own layout — Orochia, Orazaka, Yasakia, Yororis (the accessibility pass, krizaka-ui#134); MarketingLayout and AppShell already use it.

When to use

At the top of every application shell that keeps its own navigation (MarketingLayout and AppShell already include it).
On any page where several navigation stops come before the content.

When not to use

To jump inside a long page (a contents list).Use instead: Table of contents
In a native app: screen readers have their own rotor and headings.Use instead: Tab bar

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { SkipLink } from "@krizaka/ui/skip-link";

Examples

Default

Press Tab: the link appears; Enter lands on the content.

Props

A "skip to content" link: the first tab stop, hidden until focused; Enter moves focus to the target.

Prop	Type	Default	Description
`href`	`#${string}`	`#content`	The content to land on: `#` and its `id`. The element becomes focusable (`tabindex="-1"`) when it is not.

Accessibility

WCAG 2.4.1 Bypass Blocks. A visually hidden link is still read by screen readers as a link to the content.
Focus really moves, even when a router intercepts hash links.

Keyboard

Keys	Action
`Tab`	The first stop: the link appears as a pill above everything, in the brand ring.
`Enter`	Moves focus to the target, which becomes focusable (`tabindex="-1"`) when it is not.

Best practices

Make it the very first focusable element, before the header.
Pass the label already translated (“Skip to content”), and point href at the element that holds the content (<main id="content">).
One per page. It is a link, so it stays in the page's history; the target takes focus.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub