Skip to main content
  1. X-GOVUK projects
  2. GOV.UK Components
  3. Link helpers

Link helpers

In addition to the components, this gem also comes with link helpers that are often reimplemented across projects.

Regular links are just plain anchor elements with the govuk-link class.

Input

Output

Use inverse hyperlinks on dark backgrounds.

Input

Output

Input

Output

When space is limited we sometimes rely on the link’s position to provide context about its target. An example of this is in admin interfaces where rows in a table often have a ‘View’ link, or a ‘Delete’ button.

Omitting the extra text entirely leaves users of assistive technologies like screen readers at a disadvantage, as they can’t infer that context. We can solve this problem using visually hidden text that isn’t visible on the screen but will be read out by screen readers.

The keyword arguments automatically add a space between the visually hidden and regular text.

Input

Output

You can use the new_tab parameter to automatically set the target and rel attributes as suggested by the design system.

When the link text is passed in as a string argument, ‘opens in new tab’ is added to the end automatically. No suffix is added when the helper is used in block mode.

The default text can be set using the default_link_new_tab_text configuration option and it can be suppressed by setting it to an empty string.

If you don’t want any extra text to be rendered you suppress the behaviour with new_tab: "".

Input

Output


Class helpers

Rails has lots of link helpers and only the most frequently used are wrapped by this library. If you need to use another variant, like link_to_if, you can use the govuk_link_classes and govuk_button_classes helpers to ensure the correct classes are assigned.

When no arguments are provided to govuk_link_classes, only the default govuk-link will be added. Alternate styles can be passed in as a snake cased array of variants.

Input

p.govuk-body
  = link_to_if(true,
    'A regular link generated by Rails',
    '#',
    class: govuk_link_classes)

p.govuk-body
  = link_to_if(true,
    'A muted and not underlined link generated by Rails',
    '#',
    class: govuk_link_classes(muted: true, no_underline: true))
<p class="govuk-body">
  <%= link_to_if(true, 'A regular link generated by Rails', '#', class: govuk_link_classes) %>
</p>
<p class="govuk-body">
  <%= link_to_if(true, 'A muted and not underlined link generated by Rails', '#', class: govuk_link_classes(muted: true, no_underline: true)) %>
</p>

Output

<p class="govuk-body">
  <a class="govuk-link" href="#">
    A regular link generated by Rails
  </a>
</p>
<p class="govuk-body">
  <a class="govuk-link govuk-link--muted govuk-link--no-underline" href="#">
    A muted and not underlined link generated by Rails
  </a>
</p>