Language switcher in menu

support
10

Here is my take on a language switcher. I put some work in to getting proper markup and attributes, setting rel as alternative and setting hreflang etc.

<h2 class="visually-hidden">{{ i18n "lang_select_title" }}</h2>
<nav class="language-selector layout__language-selector">
<ul class="navbar">
{{ if .IsTranslated -}}
{{ range .Translations }}
<li><a rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }}</a></li>
{{ end -}}
{{ else -}}
{{ range .Site.Languages -}}
{{ if ne $.Site.Language.Lang .Lang }}
<li><a rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }}</a></li>
{{ end -}}
{{ end -}}
{{ end -}}
</ul>
</nav>

This switcher will switch to a translated version of the page if it exist and the front page if it doesn’t.

Wrote about it at https://xdeb.org/post/2018/04/05/go-multilingual-with-hugo/

1 Like