Navigation

Skip Link

The first focusable element, which jumps keyboard users past the header to the content.

BetaUsed in Aback Tools, Aback Launch, Aback GroupRegistry JSON

Example headerDocs Blog

Click in the frame above, then press Tab from the top of this preview to reveal the link. This site has its own skip link: press Tab on any page.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add skip-link

Writes components/ui/skip-link.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

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

Props and composition points for Skip Link. Native element props pass through.

Prop	Type	Default	Description
`href`	`string`	"#main-content"	The hash of the main content's id.
`children`	`ReactNode`	"Skip to content"	The link text. Localize it.
`className`	`string`	None	Adjust the revealed position, for example below a fixed banner.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Place it first in the body so it is the first tab stop on every page.
It is visually hidden until focused, then appears at the top left with a visible focus ring.
Give the target an id and tabIndex={-1} if it is not natively focusable, so focus actually moves there.
This satisfies WCAG 2.4.1 Bypass Blocks for repeated headers and navigation.

Key	Action
`Tab`	Reveal the link from the top of the page.
`Enter`	Move focus to the main content.

The Aback products whose interfaces shaped this component.