# Skip Link
> A link past the navigation to the page's content, for keyboard users.
Source: https://shadleaf.dev/current/components/skip-link/
**Example: Skip link.** Hidden until it has the focus: click into the frame and press Tab. It skips to the element with id="main" (here the paragraph below), which tabindex="-1" lets take the focus.
```html
The page's content.
```
## Usage
A sidebar or a header puts many links before the content. A skip link lets a keyboard user jump past them
([WCAG 2.4.1](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks)). Put it first in the body:
```html
...
...
```
It is hidden until it has the focus, which the first Tab on the page gives it, and then shows at the top of the page.
Following it moves the focus to the page's `main`, and the next Tab goes on from there.
## The target
The link goes to the element with `id="main"`; `for` points it at another id. [``](https://shadleaf.dev/current/components/sidebar.md) is
``, so with a sidebar there is nothing to set up.
The target needs `tabindex="-1"` when it is no control of its own, as a `main` is. Without it, Chromium and Firefox
only move the place the next Tab starts from: the focus itself goes to the page, and a screen reader stays where it
was. `tabindex="-1"` lets the target take the focus without making it a tab stop. A target of your own:
```html
...
...
```
The focused `main` draws no focus ring: it is no control, and the page scrolling to it shows where the focus went.
## Text
The text is "Skip to main content" (the message `sl.skip-link`). Content of its own replaces it:
```html
Skip to the results
```
## htmx
With `hx-boost` on the body the skip link still works: htmx leaves links to a place on the same page alone, so
following it makes no request.
## Messages
| Key | English |
| --- | --- |
| `sl.skip-link` | Skip to main content |
## Attributes
Attributes of ``: A link past the navigation to the page's content, for keyboard users: put it first in the body. Hidden until it has the focus (the first Tab on the page), then drawn at the top of the page. Its text is "Skip to main content" (the message `sl.skip-link`), which content of its own replaces. The target should be able to take the focus: `sl:sidebar-inset` is `id="main"` with `tabindex="-1"`, so the default target works with it.
| Attribute | Values | Default | Description |
| --- | --- | --- | --- |
| `for` | *string* | `main` | The `id` of the element it skips to, usually the `main`. |
Every prop can also be set from an expression: `th:for="${...}"`. Any other attribute passes through to the rendered element, and `class` is appended.