Link helpers
In addition to the components, this gem also comes with link helpers that are often reimplemented across projects.
Regular link
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', '#' %>Inverse hyperlink
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>Other link styles
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
Output
Links that open in a new tab
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
A link with the default new tab text (opens in new tab)
<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>