Link
Pseudo-component
A drop in replacement for the standard HTML <a> tag, with GovUK styling, that
supports fast, client-side navigation.
Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | - | 'id' attribute to place on the base HTML element |
| classBlock | string | - | Block name override in BEM style classes applied to all elements |
| classModifiers | Modifiers | - | BEM style modifiers to apply to the base HTML element |
| className | string | - | Extra classes to apply to the base HTML element |
| forceExternal | boolean | - | Whether to force the link to be treated as external (useful for internal links that are NOT handled by the application) |
When to use this component
Use this component wherever you would normally use a normal HTML <a> tag.
How it works
It wraps the Link component from React Router and so allows the router to
handle the links without a page reload when possible.
External links
If it’s an external link to a non-government website, make that clear in the link text. For example, ‘read advice on writing link text from [name of organisation]’. There’s no need to say explicitly that you’re linking to an external site. Do not use an external link icon.
No visited state
Use the no-visited-state modifier class where it is not helpful to distinguish
between visited and unvisited states, for example when linking to pages with
frequently-changing content such as the dashboard for an admin interface.
Opening links in a new tab
Avoid opening links in a new tab or window. It can be disorienting - and can cause accessibility problems for people who aren’t able to visually perceive that the new tab has opened.
If you need a link to open in a new tab - for example, to stop the user losing information they’ve entered into a form - then include the words ‘opens in new tab’ as part of the link. There’s no need to say ‘tab or window’, since opening in a new tab is the default behaviour for most browsers.
Include rel="noreferrer noopener" along with target="_blank" to reduce the
risk of reverse tabnabbing. The following example shows how to do this in HTML.
If you’re displaying lots of links together and want to save space and avoid repetition, consider doing both of the following:
- adding a line of text before the links saying ‘The following links open in a new tab’
- including
<span class="govuk-visually-hidden">(opens in new tab)</span>as part of the link text, so that part of the link text is visually hidden but still accessible to screen readers
Links on dark backgrounds
Use the govuk-link--inverse modifier class to show white links on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.
Make sure all users can see the links – the white links and background colour must have a contrast ratio of at least 4.5:1.
Links without underlines
Use the govuk-link--no-underline modifier class to remove underlines from links.
Only do this if the context tells the user that the text is a link, even without the underline.
For example, links in a header or side navigation might not need underlines. Users will understand that they’re links because of where they are, at the same place, across different pages.
Links to change a language
You can use links to allow a user to access the current content in a different language.
When offering links to content in other languages, make sure:
- the link’s text includes the name of the alternative language in both English and the source language
- the link’s purpose is always clear, even when taken out of context
- the link element includes an
hreflangattribute that identifies the language of the linked page.
For example, your link text could be ‘use [Service name] in [language]’.