Skip link

Standard

Default

Use the default skip link to let keyboard-only users skip to the main content on a page.

Show code

<a class="govuk-skip-link" data-module="govuk-skip-link" href="#content">Skip to main content</a>

---
import { SkipLink } from "@i-dot-ai-npm/component-library-astro";
---

<SkipLink href="#content">Skip to main content</SkipLink>

import { SkipLink } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <SkipLink href="#content">Skip to main content</SkipLink>
  );
}

<script>
  import { SkipLink } from "@i-dot-ai-npm/component-library-svelte";
</script>

<SkipLink href="#content">Skip to main content</SkipLink>

import { SkipLink } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <SkipLink href="#content">Skip to main content</SkipLink>
  );
}

When to use this component

All GOV.UK pages must include a skip link. Usually, you should place the skip link immediately after the opening <body> tag. However, if you're using a Cookie banner component, place the skip link immediately after the cookie banner.

Some automated accessibility testing tools may warn that the skip link element is not inside a landmark. This warning does not apply to skip links, so you can ignore it. Do not wrap the skip link in a <nav> region, or move it inside the header.