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

Feature flags

Feature flag control

This is an experimental feature for turning the 'rebrand' feature flag on and off only.

Show all flag states

Skip to main content

Skip link

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

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