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

Hi David,

I went through the doc again and played around with my theme. I placed the block helper as it looks like the cleaner solution, however I can’t seem to be able to check the value it has.
In admin panel I created a primary menu with links in french, and a secondary menu with links in english.
I am trying to call the right menu based on the value of the lang block, but I am at a road block again.

I don’t think you should be using Handlebars code to define data values. You’re better off checking an internal tag and then showing the navigation based on that value. Alternatively you could code up the navigation items yourself in a partial and selectively add it to en and fr templates?

1 Like

Hey David,

I had tried something like:

  {{#has tag="#en"}}
     {{navigation type="secondary"}}
{{else}}
     {{navigation}}
 {{/has}}

Is it what you mean by using internal tags for the navigation?

That’s right! Some page routes may require that you apply a page to them so they have access to the page data and ergo the tags of the page.

Awesome!! :slight_smile:

What I tried was in navigation.hbs the following code, but it did not work.
All pages and posts have either #en or #fr to distinguish the language.

 {{#has tag="#en"}}
	{{#foreach navigation type="secondary"}}
		HTML Code for menu
	{{/foreach}}
{{else}}
	{{#foreach navigation}}
		HTML Code for menu
	{{/foreach}}
{{/has}}

navigation.hbs is called in the header, itself called in default.hbs