Skip link examples

• # default

  Open this example in a new tab

  Skip to main content

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

  
  {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
  
  {{ govukSkipLink({
    "text": "Skip to main content",
    "href": "#test-target-element"
  }) }}
          

• # with focus

  Open this example in a new tab

  Skip to main content

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

  
  {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
  
  {{ govukSkipLink({
    "classes": ":focus",
    "text": "Skip to main content",
    "href": "#test-target-element"
  }) }}
          

• # no href

  Open this example in a new tab

  {
    "text": "Skip to main content"
  }

  
  {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
  
  {{ govukSkipLink({
    "text": "Skip to main content"
  }) }}
          

• # custom href

  Open this example in a new tab

  Skip to custom content

  {
    "text": "Skip to custom content",
    "href": "#custom"
  }

  
  {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
  
  {{ govukSkipLink({
    "text": "Skip to custom content",
    "href": "#custom"
  }) }}
          

• # custom text

  Open this example in a new tab

  {
    "text": "skip"
  }

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

• # html as text

  Open this example in a new tab

  {
    "text": "<p>skip</p>"
  }

  
  {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
  
  {{ govukSkipLink({
    "text": "<p>skip</p>"
  }) }}
          

• # html

  Open this example in a new tab

  {
    "html": "<p>skip</p>"
  }

  
  {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
  
  {{ govukSkipLink({
    "html": "<p>skip</p>"
  }) }}
          

• # classes

  Open this example in a new tab

  {
    "text": "Skip link",
    "classes": "app-skip-link--custom-class"
  }

  
  {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
  
  {{ govukSkipLink({
    "text": "Skip link",
    "classes": "app-skip-link--custom-class"
  }) }}
          

• # attributes

  Open this example in a new tab

  {
    "text": "Skip link",
    "attributes": {
      "data-test": "attribute",
      "aria-label": "Skip to content"
    }
  }

  
  {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
  
  {{ govukSkipLink({
    "text": "Skip link",
    "attributes": {
      "data-test": "attribute",
      "aria-label": "Skip to content"
    }
  }) }}