SkipLink

Use SkipLink

SkipLink is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, SkipLink } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <SkipLink href="#main-content" />
      <main id="main-content" tabIndex={-1}>Page content</main>
    </FloodRoot>
  );
}

Design notes

• Place SkipLink early in DOM order and point href at a nonempty same-page fragment. The target should have tabIndex=-1 (or already be focusable). Native fragment navigation updates the URL; the component then focuses and reveals the target.
• It stays visually hidden until focused. The click handler respects prevented events, modifier navigation and new-window targets. Reduced motion uses immediate scrolling. It does not create a focus trap or change the target tabindex.
• Original compatible addition in the unpublished 0.2.5 source candidate.

API reference