Skip link

Skip link

(open in a new window)

Code

Markup

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

Macro

{% from "skip-link/macro.njk" import govukSkipLink %}

{{ govukSkipLink({
  "text": "Skip to main content",
  "href": "#content"
}) }}

Skip link with focus

(open in a new window)

Simulate triggering the :focus CSS pseudo-class, not available in the production build.

Code

Markup

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

Macro

{% from "skip-link/macro.njk" import govukSkipLink %}

{{ govukSkipLink({
  "classes": ":focus",
  "text": "Skip to main content",
  "href": "#content"
}) }}