ComponentSkip link

3 of 3 upstream examples match. Razor component: <NhsukSkipLink>

Default

Matches upstream

Razor Pages and MVC

<nhsuk-skip-link href="#maincontent" text="Skip to main content" />

Blazor

<NhsukSkipLink Href="#maincontent" Text="Skip to main content" />

Nunjucks (upstream)

{% from "nhsuk/components/skip-link/macro.njk" import skipLink %}

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

Without hash fragment

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-skip-link
    href="/nhsuk-frontend/components/boilerplate/"
    text="Skip to main content"
/>

Blazor

<NhsukSkipLink
    Href="/nhsuk-frontend/components/boilerplate/"
    Text="Skip to main content"
/>

Nunjucks (upstream)

{% from "nhsuk/components/skip-link/macro.njk" import skipLink %}

{{ skipLink({
  "href": "/nhsuk-frontend/components/boilerplate/",
  "text": "Skip to main content"
}) }}

Without link target

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-skip-link href="#this-element-does-not-exist" text="Skip to main content" />

Blazor

<NhsukSkipLink Href="#this-element-does-not-exist" Text="Skip to main content" />

Nunjucks (upstream)

{% from "nhsuk/components/skip-link/macro.njk" import skipLink %}

{{ skipLink({
  "href": "#this-element-does-not-exist",
  "text": "Skip to main content"
}) }}