Skip link
Use the skip link component to help keyboard-only users skip to the main content on a page.
<p class="govuk-body">To view the skip link component tab to this example, or click inside this example and press tab.</p>
<a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a><p class="govuk-body">To view the skip link component tab to this example, or click inside this example and press tab.</p>
{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
{{ govukSkipLink({
text: "Skip to main content",
href: "#content"
}) }}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, 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.
How it works
Some people use the tab key on their keyboard to navigate through the links and form elements on a web page.
Including the skip link component gives users the option to bypass the top-level navigation links and jump to the main content on a page.
The skip link component is visually hidden until a keyboard press activates it.
There are 2 ways to use the skip link component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
<p class="govuk-body">To view the skip link component tab to this example, or click inside this example and press tab.</p>
<a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a><p class="govuk-body">To view the skip link component tab to this example, or click inside this example and press tab.</p>
{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
{{ govukSkipLink({
text: "Skip to main content",
href: "#content"
}) }}Help improve this page
To help make sure that this page is useful, relevant and up to date, you can:
- take part in the 'Skip link' discussion on GitHub and share your research
- propose a change – read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.