SkipLink

Alpha

A navigation aid that lets keyboard users skip past repetitive content and jump directly to main content. Visually hidden until focused.

Import

import { SkipLink } from "@compa11y/react";

Usage

Example.tsx

import { SkipLink } from "@compa11y/react";

// Place as the very first focusable element in the page
function Layout({ children }) {
  return (
    <>
      <SkipLink target="#main-content" />
      <nav>{/* navigation */}</nav>
      <main id="main-content" tabIndex={-1}>
        {children}
      </main>
    </>
  );
}

// Custom label
<SkipLink target="#main-content">Skip navigation</SkipLink>

// Multiple skip links
<SkipLink target="#main-content">Skip to content</SkipLink>
<SkipLink target="#search">Skip to search</SkipLink>

Features

Visually hidden until focused — appears as a fixed-position link on Tab
Programmatically focuses the target element on activation
Adds tabindex='-1' to target if needed so it can receive focus
Scrolls the target into view
Renders as a semantic <a> element for progressive enhancement
No ARIA needed — screen readers announce it as a link naturally
unstyled prop for full customization

Props

SkipLink component props
Prop	Type	Default	Description
`target`	`string`	`'#main-content'`	CSS selector for the skip destination element
`children`	`ReactNode`	-	Link label text (defaults to 'Skip to main content')
`unstyled`	`boolean`	`false`	Removes all default styles

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for SkipLink
Key	Action
`Tab`	Reveals the skip link (it is the first focusable element)
`Enter`	Activates the link and moves focus to the target element