Component

Skip link

Skip link component helps keyboard-only users skip to the main content on a page

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Skip to main content

How to call this component

<%= render "govuk_publishing_components/components/skip_link", {} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • becomes visible when pressing tab
  • is the first items that screen readers hear and that keyboard users tab to

Other examples

With different text (preview) 

<%= render "govuk_publishing_components/components/skip_link", {
  text: "Skip to results"
} %>

With different href (preview) 

<%= render "govuk_publishing_components/components/skip_link", {
  href: "#somewhere-on-the-page"
} %>

Custom title and href (preview) 

<%= render "govuk_publishing_components/components/skip_link", {
  text: "Skip to my content",
  href: "#my-content"
} %>