This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Skip link

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: skip link with focus

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"
}) }}