# SkipLink

A native skip-navigation link revealed on focus and aimed at a page content target.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `href` | `string` | `Required` |
| `children` | `Inherited native HTML prop` | `"Skip to content"` |
| `Native HTML props` | `Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">` | `Forwarded` |