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)

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:

Skip-link

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string.
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

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