# SkipLink

> Lets keyboard users jump past navigation to the main content.

Category: Navigation · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/skip-link

Place SkipLink as the first element in <body>. It stays hidden until it receives focus, then appears at the top-left corner. Activating it moves focus to the target, #main by default, so the next Tab continues inside the content.

## Import

```tsx
import { SkipLink } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

Click into the preview and press Tab to reveal the link.

```tsx
import { SkipLink, Text } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div
      style={{ position: 'relative', transform: 'translateZ(0)', width: '100%', minHeight: 100 }}
    >
      <SkipLink target="docs-skip-demo" />
      <Text size="sm" tone="muted">
        Navigation would be here.
      </Text>
      <div id="docs-skip-demo">
        <Text size="sm">Main content</Text>
      </div>
    </div>
  );
}
```

### Custom target and label

```tsx
import { SkipLink, Text } from '@bindshq/stance-react';

export function CustomTarget() {
  return (
    <div
      style={{ position: 'relative', transform: 'translateZ(0)', width: '100%', minHeight: 100 }}
    >
      <SkipLink target="#docs-skip-templates">Skip to templates</SkipLink>
      <div id="docs-skip-templates">
        <Text size="sm">Templates list</Text>
      </div>
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| SkipLink | `target` | `string` | `'main'` | Id of the element to jump to, with or without #. |
| SkipLink | `children` | `ReactNode` | `'Skip to main content'` | Link text. |

## Accessibility

- Satisfies WCAG 2.4.1 Bypass Blocks.
- Moves focus, not just scroll position, by giving the target tabindex="-1" when needed.
- Becomes visible on focus with the standard focus ring.

## Keyboard

| Keys | Action |
| --- | --- |
| `Tab` | From the top of the page, reveals the link. |
| `Enter` | Moves focus to the main content. |

## Guidelines

**Do**

- Render it first in the document.
- Give the target a stable id.

**Don’t**

- Hide it with display: none; it must stay focusable.

## Related

- https://stanceui.com/components/link
- https://stanceui.com/components/container