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.

Tags:

Comments

Tai

Fri, 06/17/2011 - 23:44

Hi
just confuse about structure directory en and fr and Add link .
Could you give source code and configure for Setting up multilingual menus in D7 ?

Thank you
Tai

admin

Mon, 06/20/2011 - 12:05

Hey Tai,

Go to admin/config/regional/i18n/variable and make sure that the variable Source for the Main links is checked and therefore designated as a multilingual variable. I forgot to mention this important setting. Apologies! I've updated my article with more details. Let me know if it helps.

ecopeter

Mon, 09/05/2011 - 02:58

As far as we exclude very complex technical documentation and articles, your practical step by step tutorial about multilingual settings in drupal is absolutely the best I've ever seen in the web.
Thanks

admin

Mon, 09/05/2011 - 16:54

And thanks for your kind words.

bobafett

Mon, 09/12/2011 - 18:33

Great, just what i was looking to do.
Thank you!!

bobafett

Mon, 09/12/2011 - 18:55

Do you know how to have the correct menu (in the node language) choosed when you are adding a new node in the "Menu Settings / Provide a Menu link" option?
Thank you

admin

Mon, 09/12/2011 - 19:15

Hey bobafett,

The best way to add a new menu is to first create the node (e.g. an "About me" page in English). In the page node/add form, check the "Provide a menu link" checkbox. Enter a "Menu link title". Then in "Parent item", tell Drupal where this menu should be displayed. It should go somewhere under MAIN MENU ENGLISH. When you create the French translation, make sure this option is set to MAIN MENU FRENCH. Once your new node is saved, you can set your new menu's position in the menu tree by going to the admin menu interface (admin/structure/menu).

bobafett

Mon, 09/12/2011 - 22:06

Thank you for your quick response,
So to add the translated node to the French menu I will have to go to the admin menu interface because the MAIN MENU FRENCH will not be displayed in the node/add form.

Luca Barbetti

Fri, 09/30/2011 - 10:25

Hi, I think you have to edit the content type, e.g. article in admin/structure/types/manage/article, and in menu settings to select the corresponding available menu (there you should see all the MAIN MENUs you have created).

admin

Mon, 09/12/2011 - 22:29

If MAIN MENU FRENCH won't display in the "Parent item" drop down of a node form, then something is wrong. I suggest you go back to the beginning of the article and - slowly - make your way down. You know what they say, the devil is in the details !

Marion

Fri, 09/23/2011 - 06:49

You saved my holidays! :)

Luca

Wed, 09/28/2011 - 18:24

I think you did a great job and I thank you for sharing and explaining it in such a clear manner. I've tried to build a nested multingual main menu (superfish) using the translate tabs in content and menu items editing, selecting carefully paths and parent links. The best I've got so far is multilingual main menu with few items but no child items, which is not what I wanted. Either I'm missing something or it's not possible to have one multilingual main menu. What do you think about it?
Cheers

Jupiter

Tue, 10/25/2011 - 12:38

Thanks for this very clear, efficient and concise tutorial!

Can I suggest adding to the main text the part about making sure the menu is available to the content type? I just figured this out on my own before reading the comments, and was about to post the discovery here when I finally read all the comments and saw others were stumped by this detail.

Best regards,
jM

admin

Wed, 10/26/2011 - 18:33

Hey Jupiter, thanks for the kind words & suggestion. I've added an update at the bottom of the article. Hope it clears things out.

Cheers!

weba

Sun, 01/29/2012 - 12:46

Thank you for the very useful tutorial. Do you think you could give me a hint what changes need to be done to it to make it work with two domains, one for each language? I've tried to follow it for setting it up for two different domains but it doesn't seem to work - when I choose source for main links in en/admin/structure/menu/settings i get only one menus to appear, only in English. If I open the fr/admin/structure/menu/settings for the 2nd language to check I find it is set to English. If I change it now back to French and open fr/admin/structure/menu/settings to see which language is set there I find it is French. Maybe you have a

admin

Sun, 01/29/2012 - 20:07

Hi weba. I'm not sure I fully understand where you're going with the 2 domains. About the problems you write about in the third paragraph:

  • Make sure the Multilingual settings at admin/config/regional/i18n/variable are set properly
  • Read the update at the bottom of the article and make sure content types are properly setup

Dionisis

Thu, 02/16/2012 - 10:25

Great guide!! I want to ask something. I use the admin language module which force the admin section of the site to stay in a language no matter suffix the url has. (en or fr..) and i did that because my client doesn't know france, just english. The problem is that if I visit the MAIN FRENCH MENU menu i won't see the links for this menu until i disable admin language module. In other words. In order to see the links for each menu in the admin area i need to switch the whole site to the language i want the translation. I hope it makes sense. sorry for my english

Artur

Mon, 12/24/2012 - 16:28

How should one proceed with View that generate a Menu Item for a page? I assume you only need to create a single view for displaying content and set the language filter to "Current language". What about the menu item itself and the path? - the i18nviews interface does not seem to give option to create a translated menu set. Should we then manually create a translated menu item(s) and bind them into a set? What is the correct way?

admin

Thu, 12/27/2012 - 09:48

Hello Artur. Yes a single view with content negotiation will do. The path is set in the 'Page' display. That's it for Views. Then from the menu UI simply add a menu item to each of your custom menus using that path and you're done.

Shankar

Wed, 06/19/2013 - 03:18

I have cereated two menus for english Home and french home ,But i selected the language english its showing only one english home menus only why not showing french home menus in menu bar...

Add new comment

More information about text formats

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.