Language navigation

The Language navigation component helps users choose and switch between languages when using a service.

Basic language navigation

The easiest way to render the language navigation component is to pass in an array of hashes.

The item with current: true will be rendered in a <span> and the rest as links.

Input

= govuk_language_navigation(items: items)

<%= govuk_language_navigation(items: items) %>

{
  items: [
    { text: 'English', lang: 'en', current: true },
    { text: 'Français', lang: 'fr', href: '#/fr' },
    { text: 'Deutsch', lang: 'de', href: '#/de' },
    { text: '日本語', lang: 'ja', href: '#/ja' }
  ]
}

Output

<nav class="govuk-language-navigation" aria-label="language">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item"><span class="govuk-language-navigation__text" aria-current="true" lang="en">English</span></li>
    <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/fr" lang="fr" hreflang="fr" rel="alternate">Français</a></li>
    <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/de" lang="de" hreflang="de" rel="alternate">Deutsch</a></li>
    <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/ja" lang="ja" hreflang="ja" rel="alternate">日本語</a></li>
  </ul>
</nav>

Language navigation when at least one of the scripts flows from right to left

When one of the language uses script that flows from right to left, mark it with dir: 'rtl'. If any rtl items are present, items without a dir will default to ltr.

Input

= govuk_language_navigation(items: items)

<%= govuk_language_navigation(items: items) %>

{
  items: [
    { text: 'English', lang: 'en', current: true },
    { text: '日本語', lang: 'ja', href: '#/ja' },
    { text: 'العربية', lang: 'ar', href: '#/ar', dir: 'rtl' }
  ]
}

Output

<nav class="govuk-language-navigation" aria-label="language">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item"><span class="govuk-language-navigation__text" aria-current="true" dir="ltr" lang="en">English</span></li>
    <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/ja" lang="ja" hreflang="ja" rel="alternate" dir="ltr">日本語</a></li>
    <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/ar" lang="ar" hreflang="ar" rel="alternate" dir="rtl">العربية</a></li>
  </ul>
</nav>

Manually building the language navigation

For total control of the rendering you can render the items one at a time using slots.

Input

= govuk_language_navigation(html_attributes: { lang: "en" }) do |c|
  = c.with_item(text: "English", current: true, lang: "en")
  = c.with_item(text: "Cymraeg", lang: "cy", href: "#/cy", language_description_text: "Newid yr iaith i'r Cymraeg")

<%= govuk_language_navigation(html_attributes: { lang: "en" }) do |c|
 %>
<%= c.with_item(text: "English", current: true, lang: "en") %>
<%= c.with_item(text: "Cymraeg", lang: "cy", href: "#/cy", language_description_text: "Newid yr iaith i'r Cymraeg") %>
<% end %>

Output

<nav class="govuk-language-navigation" aria-label="language" lang="en">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item"><span class="govuk-language-navigation__text" aria-current="true" lang="en">English</span></li>
    <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/cy" lang="cy" hreflang="cy" rel="alternate">Cymraeg<span class="govuk-visually-hidden"> Newid yr iaith i'r Cymraeg</span></a></li>
  </ul>
</nav>

Inverted language navigation

Use inverse: true to invert the text colour when rendering on a dark background.

Input

= govuk_language_navigation(items: items, inverse: true)

<%= govuk_language_navigation(items: items, inverse: true) %>

{
  items: [
    { text: 'English', lang: 'en', current: true },
    { text: 'Français', lang: 'fr', href: '#/fr' },
    { text: 'Deutsch', lang: 'de', href: '#/de' },
    { text: '日本語', lang: 'ja', href: '#/ja' }
  ]
}

Output

<nav class="govuk-language-navigation govuk-language-navigation--inverse" aria-label="language">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item"><span class="govuk-language-navigation__text" aria-current="true" lang="en">English</span></li>
    <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/fr" lang="fr" hreflang="fr" rel="alternate">Français</a></li>
    <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/de" lang="de" hreflang="de" rel="alternate">Deutsch</a></li>
    <li class="govuk-language-navigation__list-item"><a class="govuk-language-navigation__link" href="#/ja" lang="ja" hreflang="ja" rel="alternate">日本語</a></li>
  </ul>
</nav>