Skip to content
comp0

comp0

Navigation

Skip Link

A hidden link that lets keyboard users jump past repeated content.

When to use it: Use it as the first focusable element so keyboard users can bypass navigation (WCAG 2.4.1).

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Skip to main content

Press Tab from the start of this example to reveal the link.

Main content starts here.
Skip Link.tsxtsx
import { SkipLink } from "@comp0/react";

export function Example() {
  return (
    <div className="flex w-64 flex-col gap-3 text-base text-zinc-800 sm:text-sm dark:text-zinc-100">
      <SkipLink
        href="#skip-link-main"
        className="self-start rounded bg-teal-700 px-3 py-2 text-white outline-offset-2 focus-visible:outline-2 focus-visible:outline-teal-600 dark:bg-teal-400 dark:text-zinc-950 dark:focus-visible:outline-teal-300"
      >
        Skip to main content
      </SkipLink>
      <p className="text-zinc-600 dark:text-zinc-400">
        Press Tab from the start of this example to reveal the link.
      </p>
      <nav aria-label="Example" className="flex gap-3">
        <a className="underline underline-offset-4" href="#skip-link-home">
          Home
        </a>
        <a className="underline underline-offset-4" href="#skip-link-docs">
          Docs
        </a>
        <a className="underline underline-offset-4" href="#skip-link-blog">
          Blog
        </a>
      </nav>
      <main
        id="skip-link-main"
        tabIndex={-1}
        className="rounded border border-zinc-950/10 p-3 dark:border-white/10"
      >
        Main content starts here.
      </main>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. SkipLink

    Native anchor that stays visually hidden until it receives focus. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Put SkipLink first inside body, before the repeated navigation.

  2. 2

    Add the supporting parts

    Point href at the main content, such as "#main".

  3. 3

    Make the behavior clear

    Give the target element the matching id and tabIndex={-1} so focus lands there.

    Exampletsx
    <SkipLink href="#main">Skip to main content</SkipLink>

Keyboard

⇥
Reveals the link when it receives focus.
↵
Jumps to the target and hides the link again.

Forms and accessibility

No form behavior.

Accessibility checklist

  • Make it the first focusable element on the page.
  • Style the revealed state clearly; it appears exactly when a keyboard user needs it.
  • Point href at a real element with a matching id, and give that target tabIndex={-1}.

API reference

Importtsx
import { SkipLink } from "@comp0/react";

SkipLink

DOM element

Native anchor that stays visually hidden until it receives focus.

PropTypeDescription
hrefstringIn-page target the link jumps to, such as "#main".
className / stylestring / CSSPropertiesStyles the revealed link; merged with the hiding styles while hidden.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-focused]

on SkipLink

The link is focused and visible.
:focus-visible

on SkipLink

Native keyboard-focus styling hook.

Keep exploring