# SkipLink

The page’s first link, invisible until the keyboard reaches it: it goes straight to the content, skipping the navigation.

## Playground

```html
<a class="feitio-skip-link" style="position: static; translate: none" href="#playground">Skip to content</a>
```

## When to use

-   On every page with navigation before the content, which is almost all. AppShell and DocPage already include it.

## When not to use

-   On a page with nothing before the content.

## Examples

### How it appears

Press Tab right after opening this page: "Skip to content" shows up in the corner, as lifted paper. Below, it is drawn open.

Show code

```html
<a class="feitio-skip-link" href="#conteudo">Pular para o conteúdo</a>
…
<main id="conteudo" tabindex="-1">…</main>
```

## Accessibility

-   It must be the first focusable element, and its target (`main`) must accept focus (`tabindex="-1"`).
-   It appears on focus; it is never hidden for good.

## Attributes

Attribute

Values

What for

`class="feitio-skip-link"`

required

Hidden until the keyboard arrives; appears as lifted paper.

`href`

`"#conteudo"`

The id of the main content.

`tabindex="-1"`

on the `<main>`

The target accepts focus.