Components

Skip link

Use the skip link component to help keyboard-only users skip to the main content on a page.

To view the skip link component tab to this example, or click inside this example and press tab.

HTML
React

<p>
  To view the skip link component tab to this example,
  or click inside this example and press tab.
</p>
<a
  class="govuk-skip-link"
  href="#content"
  data-module="govuk-skip-link"
>
  Skip to main content
</a>

<>
  <p>
    To view the skip link component tab to this
    example, or click inside this example and press
    tab.
  </p>
  <SkipLink for="content" />
</>

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element
classBlock	string	-	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	-	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element
for	string	-	REQUIRED. ID of the element to skip to

When to use this component

All GOV.UK pages must include a skip link in 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.

Stories

Standard

A standard Skip link.

To view the skip link component tab to this example, or click inside this example and press tab.

HTML
React

<p>
  To view the skip link component tab to this example,
  or click inside this example and press tab.
</p>
<a
  class="govuk-skip-link"
  href="#content"
  data-module="govuk-skip-link"
>
  Skip to main content
</a>

<>
  <p>
    To view the skip link component tab to this
    example, or click inside this example and press
    tab.
  </p>
  <SkipLink for="content" />
</>

Custom text

A Skip link with custom text.

To view the skip link component tab to this example, or click inside this example and press tab.

HTML
React

<p>
  To view the skip link component tab to this example,
  or click inside this example and press tab.
</p>
<a
  class="govuk-skip-link"
  href="#content"
  data-module="govuk-skip-link"
>
  Skip ahead
</a>

<>
  <p>
    To view the skip link component tab to this
    example, or click inside this example and press
    tab.
  </p>
  <SkipLink for="content">Skip ahead</SkipLink>
</>