Navigation Menu for multi language site

Hi all,

I have been reading a couple of forum posts here as well as the Ghost Documentation but, I still encounter an issue where my menu won’t change base on the site language.

I am setting a 2 languages website, main in fr and second in en.
Main language url: site[.]com
Second language url: site[.]com/en/

My theme is multi language ready and I have a fr.json and en.json file for it.

For both languages, the menu will have this structure:

  • Home (Displaying a short text and recent posts)
  • Blog (a blog)
  • About
  • Contact

I created in the admin page, a primary and secondary menu.

Here is what I tried so far:
header.hbs:

    <nav id="main-navigation" class="site-navigation" aria-label="Main Navigation">
      <div class="site-nav-wrap">
        <div class="site-nav-inside">
            {{!-- The tag below includes the navigation menu - partials/navigation.hbs --}}
            {{#has slug="../en/"}}
               {{navigation type="secondary"}}
            {{else}}
               {{navigation}}
             {{/has}}
             {{!-- The tag below includes the social links list - partials/social-links.hbs --}}
                {{> "social-links"}}
             {{!-- The tag below includes the language switcher list - partials/language-switcher.hbs --}}
                {{> "language-switcher"}}
          </div><!-- .site-nav-inside -->
       </div><!-- .site-nav-wrap -->
    </nav><!-- .site-navigation -->

navigation.hbs:

{{!-- Navigation menu --}}
{{#if isSecondary}}
{{#foreach navigation type=“secondary”}}
<a href="{{url absolute=“true”}}">{{label}}
{{/foreach}}
{{else}}
{{#foreach navigation}}
<a href="{{url absolute=“true”}}">{{label}}
{{/foreach}}
{{/if}}

And here is my routes.yaml:

routes:
/:
    controller: channel
    filter: 'tag:-hash-en'
    template: home
/en/:
    controller: channel
    filter: 'tag:hash-en'
    template: home
/en/about/:
    controller: channel
    filter: 'tag:hash-en+title:about'
    data: page.about
    template: page
/contact/:
    controller: channel
    filter: 'tag:hash-fr+title:ecrivez-moi'
    data: 'page.ecrivez-moi'
    template: page
/en/contact/:
    controller: channel
    filter: 'tag:hash-en+title:email-me'
    data: 'page.email-me'
    template: page

collections:
/blog/:
    permalink: /blog/{slug}/
    filter: 'tag:-hash-en'
    template: index
/en/blog/:
    permalink: /en/blog/{slug}/
    filter: 'tag:hash-en'
    template: index

Thank you,

Theme locale files are not for multi-language sites, they are for translating text inside a theme for when people want to use the theme in another language. I’d highly recommend checking out our tutorial on how to create a multi-language site here:

Hope this helps!

Hi David,

I had read it and tried to adapt my routes based on that tutorial, but I will go through it again.

1 Like