SkipLink

SkipLink provides a keyboard shortcut to the main content before the application navigation.

01Preview

Tab to the skip link to reveal its keyboard shortcut.

Example content destination

02Usage

Load @dg/ui/styles.css once in the root layout.

<script>
  import { SkipLink, Page, Main, Heading } from "@dg/ui";
</script>

<Page>
  <SkipLink />
  <Main><Heading title="Collection" /></Main>
</Page>

03Notes

Native HTML attributes, DOM callbacks, class and style are forwarded to the link.
Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
When revealed, the shortcut uses --skip-link-layer above ordinary nonmodal surfaces; native modal dialogs remain in the browser top layer.

04Parameters

Name	Type	Default	Description
`href`	`string`	`"#main"`	ID of the content destination. The target must exist in the page.
`label`	`string`	`undefined`	Link text revealed on keyboard focus. Defaults to the built-in text in the `Page` language.

05Accessibility

The first Tab reveals the link. Its destination must exist. Place it first inside Page, before Header; Page's lang translates its default text.

Related subjects

Markdown source: components/skip-link