Skip to main content
GOV.UK Components for Ruby on Rails

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

= govuk_link_to 'A regular hyperlink', '#'
<%= govuk_link_to 'A regular hyperlink', '#' %>

Output

<a class="govuk-link" href="#">
  A regular hyperlink
</a>

Use inverse hyperlinks on dark backgrounds.

Input

= govuk_link_to('An inverse hyperlink', '#', inverse: true)
<%= govuk_link_to('An inverse hyperlink', '#', inverse: true) %>

Output

<a class="govuk-link govuk-link--inverse" href="#">
  An inverse hyperlink
</a>

Input

p.govuk-body
  = govuk_link_to('A hyperlink without an underline', '#', no_underline: true )

p.govuk-body
  = govuk_link_to('A hyperlink without a visited state', '#', no_visited_state: true)

p.govuk-body
  = govuk_link_to('A text-coloured hyperlink', '#', text_colour: true)
<p class="govuk-body">
  <%= govuk_link_to('A hyperlink without an underline', '#', no_underline: true ) %>
</p>
<p class="govuk-body">
  <%= govuk_link_to('A hyperlink without a visited state', '#', no_visited_state: true) %>
</p>
<p class="govuk-body">
  <%= govuk_link_to('A text-coloured hyperlink', '#', text_colour: true) %>
</p>

Output

<p class="govuk-body">
  <a class="govuk-link govuk-link--no-underline" href="#">
    A hyperlink without an underline
  </a>
</p>
<p class="govuk-body">
  <a class="govuk-link govuk-link--no-visited-state" href="#">
    A hyperlink without a visited state
  </a>
</p>
<p class="govuk-body">
  <a class="govuk-link govuk-link--text-colour" href="#">
    A text-coloured hyperlink
  </a>
</p>

Links with visually hidden text

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

= govuk_link_to('View', '#', visually_hidden_suffix: 'account')
<%= govuk_link_to('View', '#', visually_hidden_suffix: 'account') %>

Output

<a class="govuk-link" href="#">
  View<span class="govuk-visually-hidden">
    account
  </span>
</a>

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

p.govuk-body
  = govuk_link_to('A link with the default new tab text',
    '#',
    new_tab: true)

p.govuk-body
  = govuk_link_to('A link with custom new tab text',
    '#',
    new_tab: "(opens in a new window)")

p.govuk-body
  = govuk_link_to('A link with custom new tab text',
    '#',
    new_tab: govuk_visually_hidden('(opens in a new window)'))
<p class="govuk-body">
  <%= govuk_link_to('A link with the default new tab text', '#', new_tab: true) %>
</p>
<p class="govuk-body">
  <%= govuk_link_to('A link with custom new tab text', '#', new_tab: "(opens in a new window)") %>
</p>
<p class="govuk-body">
  <%= govuk_link_to('A link with custom new tab text', '#', new_tab: govuk_visually_hidden('(opens in a new window)')) %>
</p>

Output

<p class="govuk-body">
  <a class="govuk-link" target="_blank" rel="noreferrer noopener" href="#">
    A link with the default new tab text (opens in new tab)
  </a>
</p>
<p class="govuk-body">
  <a class="govuk-link" target="_blank" rel="noreferrer noopener" href="#">
    A link with custom new tab text (opens in a new window)
  </a>
</p>
<p class="govuk-body">
  <a class="govuk-link" target="_blank" rel="noreferrer noopener" href="#">
    A link with custom new tab text <span class="govuk-visually-hidden">
      (opens in a new window)
    </span>
  </a>
</p>

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>