Add new comment

Setting up multilingual menus in D7

Here are the prerequisite for this article:

  • A fresh & properly installed multilingual D7 website with Path prefix language code (e.g. "/en", "/fr", etc.).
  • An enabled Language switcher block. To configure this block, go to  en/admin/structure/block.

If you need help setting up your website, perhaps you should first read How to setup a multilingual website with Drupal 7. What I'll be covering in this article is how to create English-French bilingual menus. I'll be working from the English interface of my website. That's why you'll see a language prefix in each of the given URL (i.e. "en/..."). Alright, let's go!

  • Make sure i18n (Internationalization) modules are enabled. I've enabled all of the i18n modules except Multilingual forum (I don't have any forums).
  • Make sure the Variable module is enabled.
  • Goto en/admin/config/regional/i18n/variable, select the Source for the Main links in the list of variables to be translated & save the configuration. More about this a little later.

Now we need to create 2 custom menus: one for English and one for French. Note, we don't need & will not use the Main menu.

  • Goto en/admin/structure/menu/add and create the English menu
  • Title: MAIN ENGLISH MENU
  • Multilingual options: Fixed Language.
  • Language selector: English
  • Save

Repeat the procedure and create the French menu

  • Goto en/admin/structure/menu/add and create the French menu
  • Title: MAIN FRENCH MENU
  • Multilingual options: Fixed Language
  • Language selector: French
  • Save

Back at en/admin/structure/menu, you should now see the following

  •  Main menu
  •  Management
  •  MAIN ENGLISH MENU
  •  MAIN FRENCH MENU
  •  Navigation
  •  User menu

Now we need to tell Drupal to bypass the Main menu which is enabled by default and, instead, use the custom menus we've just created. Click on the Settings tab or go to en/admin/structure/menu/settings. Look at the Source for the Main links selector. The 6 menus listed above should all appear as options in the drop down menu. Take a few seconds to read the help text that appears underneath this selector. Note the This is a multilingual variable which appears in bold. This is the direct result of the configuration we did at en/admin/config/regional/i18n/variable. What it means is that the selection for Source for the Main links applies ONLY to the current interface. In other words, if you are in the English interface of your website (look for the "/en/" in the URL), the selection you're about to make & save will only apply to the English pages. So to set the Source for the main links for French pages, you must first switch to the French interface. Make sure you fully understand this notion of multilingual variable otherwise you will likely run into trouble later on. Assuming you are, as I am, on the English interface of your website

  • Go to en/admin/structure/menu/settings
  • set Source for the Main links to MAIN ENGLISH MENU
  • Save the configuration.

Repeat for French. Remember, that means you first have to switch to the French interface.

  •  Go to fr/admin/structure/menu/settings
  •  Set Source for the Main links to MAIN FRENCH MENU.
  •  Save the configuration.

Now we need to add menu items, right? We need to populate MAIN ENGLISH MENU and MAIN FRENCH MENU. Since we're working from a fresh D7 install, I'm assuming your default home page is something like "example.com/en". You can check this out by going to en/admin/config/system/site-information. In the Default front page field, you should see node. That's the Drupal 7 installer default home page. Adding the Home menu item:

  • Go to en/admin/structure/menu and click list links for MAIN ENGLISH MENU.
  • Then, click Add link.

Here are the settings for the Home menu:

  • Menu link title: Home
  • Path: <front>
  • [√] Enabled
  • Parent link: MAIN ENGLISH MENU
  • Save

Repeat for French

  • Go to en/admin/structure/menu and this time click list links for MAIN FRENCH MENU.
  • Click Add link.
  • Menu link title: Accueil
  • Path: <front>
  • [√] Enabled
  • Parent link: MAIN FRENCH MENU
  • Save

That should do it. Go to your home page and try using the Languages block to switch from one language to another. This is the way menus are setup on my website. Note that, at the time of writing this article, there are 5 French menus and only 3 English menus. For the Contact menu on d7One, I fist added a category (en/admin/structure/contact). And then created menu items in MAIN ENGLISH MENU and MAIN FRENCH MENU. In my case, both menu items have the same name (Contact) and path (contact). The only difference being the Parent link for the English Contact menu is set to MAIN ENGLISH MENU. The Parent link for the French Contact menu is set to MAIN FRENCH MENU. Voilà. Hope this helps. Questions & comments welcome.

Update: Oct. 26 2011

When you create an Article, if the custom menus we've just created (MAIN MENU FRENCH and MAIN MENU ENGLISH) are not listed in the drop down menu Parent item which appears when you click Provide a menu link in the Menu settings tabs, then you need to edit the Article content type.

  • go to admin/structure/types/manage/article
  • click on the Menu settings tab
  • make sure the Available menus options for MAIN MENU FRENCH and MAIN MENU ENGLISH are checked
  • don't forget to save

Thanks to bobafett for asking, Luca Barbetti for answering and Jupiter for suggesting this update.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Refresh Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.