Skip link

Skip link

Open this example in a new tab

Code

Markup

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

Macro

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

{{ govukSkipLink({
  text: "Skip to main content",
  href: "#test-target-element"
}) }}

Skip link with focus

Open this example in a new tab

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

Code

Markup

<a href="#test-target-element" class="govuk-skip-link :focus" data-module="govuk-skip-link">Skip to main content</a>

Macro

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

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