Multilingual Menu

support
1

Hi,
i am working on a multi-lang site for english and german. It is my first hugo project. I want the navigation in diffrent link names. And later a switch/link to choose a language.

Here is, what my hugo.toml(config) file looks like:

baseURL         = 'https://kettenbeil.com/'
title           = 'Kettenbeil'

defaultContentLanguage = 'de'
defaultContentLanguageInSubdir = true

[languages]
[languages.de]
languageCode = 'de-DE'
languageName = 'Deutsch'
contentDir = 'content/de'
weight = 1

[languages.de.menus]
  [[languages.de.menus.main]]
    name = 'Startseite'
    pageRef = '/'
    weight = 10
  [[languages.de.menus.main]]
    name = 'Logos'
    pageRef = '/logos'
    weight = 20
    [[languages.de.menus.main]]
    name = 'Sketches'
    pageRef = '/sketches'
    weight = 30
    [[languages.de.menus.main]]
    name = 'Fotos'
    pageRef = '/photos'
    weight = 40
    [[languages.de.menus.main]]
    name = 'Tutorials'
    pageRef = '/tutorials'
    weight = 50
    [[languages.de.menus.main]]
    name = 'Kontakt'
    pageRef = '/contact'
    weight = 60

[languages.en]
languageCode = 'en-US'
languageName = 'English'
contentDir = 'content/en'
weight = 2

[languages.en.menus]
  [[languages.en.menus.main]]
    name = 'Home'
    pageRef = '/'
    weight = 10
  [[languages.en.menus.main]]
    name = 'Logos'
    pageRef = '/logos'
    weight = 20
[[languages.en.menus.main]]
    name = 'Sketches'
    pageRef = '/sketches'
    weight = 30
    [[languages.en.menus.main]]
    name = 'Photos'
    pageRef = '/photos'
    weight = 40
    [[languages.en.menus.main]]
    name = 'Tutorials'
    pageRef = '/tutorials'
    weight = 50
    [[languages.en.menus.main]]
    name = 'Contact'
    pageRef = '/contact'
    weight = 60


  [[menus.footer]]
name = 'Terms'
pageRef = '/terms'
weight = 10
[[menus.footer]]
name = 'Privacy'
pageRef = '/privacy'
weight = 20

Here is my header.html:

<nav class="navbar navbar-expand-xl">
  <div class="container-fluid">
      <a class="navbar-brand" href="/">
        <img class="brand-logo" src="/images/Kettenbeil-Logo.png">
        <span class="brand-name">Ketten</span>beil</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          </ul>
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="/">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/logos">Logos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/sketches">Sketches</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/photos">Photos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/tutorials">Tutorials</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/contact">Contact</a>
            </li>
            {{ range $.Site.Home.AllTranslations }}
              <li class="nav-item">
                <a class="nav-link" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
              </li>
            {{ end }}
          </ul>
      </div>
  </div>
</nav>

At the moment there is only “/de” on the homepage. Cause i set defaultContentLanguageInSubdir = true and it only works on home. The “/en” works, but I have to write them in the browser. I do not know how to set the link in the navigation, that points to “de” or “en”.

Here is my github link:

Maby someone has got a hint for me.

2

Why are you hardcoding the menu links? You’ve defined the menu entries in your site configuration… just range over the collection.

Something like this to get started:

{{ range site.Menus.main }}
  <li class="nav-item">
    <a class="nav-link" href="{{ .URL }}">{{ .Name }}</a>
  </li>
{{ end }}

There’s a detailed example here:
https://gohugo.io/templates/menu/

1 Like
3

Thanks… It is working now, but one more thing. If I click on english/german he direct me to the homepage “/” and not to the translated site where I am at the moment.

Here is my new navigation:

    <nav class="navbar navbar-expand-xl">
     <div class="container-fluid">
      <a class="navbar-brand" href="/">
        <img class="brand-logo" src="/images/Kettenbeil-Logo.png">
        <span class="brand-name">Ketten</span>beil</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          </ul>
          <ul class="navbar-nav">
            {{ range site.Menus.main }}
              <li class="nav-item">
                <a class="nav-link" href="{{ .URL }}">{{ .Name }}</a>
              </li>
              {{ end }}
              {{ range $.Site.Home.AllTranslations }}
              <li class="nav-item">
                <a class="nav-link" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
              </li>
            {{ end }}
          </ul>
      </div>
    </div>
    </nav>
4

Replace this:

{{ range $.Site.Home.AllTranslations }}

With this:

{{ range .AllTranslations }}

Please open a new topic if you have furhter questions.

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.